/*
 * conciergerietoulouse.com, feuille de style unique.
 *
 * Ecrite a la main, servie telle quelle : le site tourne sur WordPress mais
 * aucune page de ce theme ne passe par Elementor ni par le theme d'origine.
 * Mesure du 14/08/2026 sur l'ancienne page d'accueil : 440 Ko de HTML,
 * 47 feuilles de style, 38 scripts externes, 188 Ko de CSS en ligne. Tout ce
 * poids servait a afficher 1 400 mots.
 *
 * BRANDING : volontairement absent a ce stade, decision de Maxim du 14/08. Tout
 * ce qui relevera de la marque (couleur, police, logo) est isole dans le bloc
 * :root ci-dessous. Changer la marque plus tard = changer ces valeurs, rien
 * d'autre. Ne jamais ecrire une couleur en dur ailleurs dans ce fichier.
 *
 * Choix assumes, pour qu'ils ne soient pas repris par accident :
 *   - Fond en blanc casse a chroma ZERO, pas un beige ni un creme. Le voisin
 *     maisonnataly.fr occupe deja le registre chaud terracotta ; les deux sites
 *     doivent etre distinguables au premier coup d'oeil.
 *   - Une seule couleur d'accent sur tout le site, jamais deux.
 *   - Une seule famille de police, hierarchie par la graisse et la taille.
 *   - Pas de carte partout : les blocs se separent par un filet ou par du vide.
 */

:root {
  /* --- MARQUE (seule zone a modifier au moment du branding) --- */
  --accent: oklch(0.44 0.11 168);
  --accent-fort: oklch(0.36 0.10 168);
  --accent-doux: oklch(0.95 0.02 168);
  --sur-accent: oklch(0.99 0 0);

  /* --- NEUTRES (chroma quasi nul, jamais de derive chaude) --- */
  --encre: oklch(0.21 0.008 250);
  --encre-douce: oklch(0.44 0.010 250);
  --papier: oklch(0.99 0 0);
  --surface: oklch(0.965 0.003 250);
  --filet: oklch(0.90 0.005 250);
  --filet-fort: oklch(0.82 0.006 250);

  /* --- TYPOGRAPHIE --- */
  --police: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --police-chiffres: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Echelle racine fluide : une seule mecanique, tout le reste en rem. */
  font-size: clamp(16px, 0.95rem + 0.18vw, 18px);

  /* --- RYTHME --- */
  --pas: 1.5rem;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --largeur: 68rem;
  --rayon: 0.75rem;

  /* --- MOUVEMENT --- */
  --duree-courte: 140ms;
  --duree: 260ms;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- PROFONDEUR (ombres teintees vers l'encre, jamais du noir pur) --- */
  --ombre-1: 0 1px 2px oklch(0.21 0.008 250 / 0.05),
    0 2px 8px oklch(0.21 0.008 250 / 0.04);
  --ombre-2: 0 2px 4px oklch(0.21 0.008 250 / 0.06),
    0 12px 32px oklch(0.21 0.008 250 / 0.07);

  /* --- COUCHES --- */
  --z-entete: 100;
  --z-barre-appel: 200;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-fort);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent);
}

/* Rythme vertical par une seule mecanique, pas par des marges posees
   composant par composant. La variable se redefinit par contexte. */
.flux > * + * {
  margin-top: var(--flux, 1rem);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.85rem);
  letter-spacing: -0.03em;
  max-width: 20ch;
}

h2 {
  font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.3rem);
}

h3 {
  font-size: 1.12rem;
  letter-spacing: -0.012em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.mesure {
  max-width: 68ch;
}

.douce {
  color: var(--encre-douce);
}

.lede {
  font-size: 1.12rem;
  color: var(--encre-douce);
  max-width: 62ch;
}

.mono {
  font-family: var(--police-chiffres);
  font-variant-numeric: tabular-nums;
}

/* ---------- STRUCTURE ---------- */

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

section {
  padding-block: clamp(3rem, 6vw, 5rem);
}

section + section {
  border-top: 1px solid var(--filet);
}

.section-large {
  background: var(--surface);
}

.section-encre {
  background: var(--encre);
  color: var(--papier);
  border-top: 0;
}

.section-encre h2,
.section-encre h3 {
  color: var(--papier);
}

.section-encre .douce,
.section-encre p {
  color: oklch(0.84 0.008 250);
}

/* ---------- ENTETE ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: oklch(0.99 0 0 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}

.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.marque {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--encre);
  line-height: 1.15;
}

.marque strong {
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.marque span {
  font-size: 0.7rem;
  color: var(--encre-douce);
  letter-spacing: 0.04em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  font-size: 0.92rem;
}

/* `:not(.bouton)` n'est pas cosmetique : sans lui, cette regle repeignait le
   texte du bouton telephone de l'en-tete en encre douce sur fond vert, deux
   couleurs de meme clarte, soit un rapport de contraste d'environ 1,1 pour 1.
   Le numero etait litteralement illisible. Constate au controle du 14/08. */
.nav a:not(.bouton) {
  color: var(--encre-douce);
  text-decoration: none;
}

.nav a:not(.bouton):hover,
.nav a:not(.bouton)[aria-current="page"] {
  color: var(--encre);
}

/* ---------- BOUTONS ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duree-courte) var(--sortie),
    border-color var(--duree-courte) var(--sortie),
    transform var(--duree-courte) var(--sortie);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton-primaire {
  background: var(--accent);
  color: var(--sur-accent);
}

.bouton-primaire:hover {
  background: var(--accent-fort);
  color: var(--sur-accent);
}

.bouton-secondaire {
  background: var(--papier);
  color: var(--encre);
  border-color: var(--filet-fort);
}

.bouton-secondaire:hover {
  border-color: var(--encre-douce);
  color: var(--encre);
}

.section-encre .bouton-secondaire {
  background: transparent;
  color: var(--papier);
  border-color: oklch(0.99 0 0 / 0.28);
}

.section-encre .bouton-secondaire:hover {
  border-color: oklch(0.99 0 0 / 0.6);
  color: var(--papier);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- GRILLES ---------- */

.grille {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .duo {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
  .duo-inverse {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* ---------- CHIFFRES CLES ---------- */

.chiffres {
  display: grid;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.chiffres > div {
  background: var(--papier);
  padding: 1.15rem 1.25rem;
}

.chiffres b {
  display: block;
  font-size: 1.7rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  color: var(--accent-fort);
  font-variant-numeric: tabular-nums;
}

.chiffres span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.86rem;
  color: var(--encre-douce);
  line-height: 1.45;
}

/* ---------- LISTES ---------- */

.liste-prestations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.liste-prestations li {
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
}

.liste-prestations strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.liste-prestations span {
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.coches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.coches li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--encre-douce);
  font-size: 0.97rem;
}

.coches li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

/* ---------- TABLEAU ---------- */

.tableau-defile {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--papier);
}

th,
td {
  text-align: left;
  padding: 0.85rem 1.1rem;
}

thead th {
  font-size: 0.76rem;
  font-weight: 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  background: var(--surface);
}

tbody tr + tr td {
  border-top: 1px solid var(--filet);
}

td.valeur {
  font-weight: 600;
  color: var(--accent-fort);
  white-space: nowrap;
}

/* ---------- QUESTIONS ---------- */

.question {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--papier);
  padding: 1.15rem 1.35rem;
}

.question + .question {
  margin-top: 0.75rem;
}

.question summary {
  cursor: pointer;
  font-weight: 580;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.question summary::-webkit-details-marker {
  display: none;
}

.question summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}

.question[open] summary::after {
  content: "\2013";
}

.question p {
  margin-top: 0.8rem;
  color: var(--encre-douce);
  font-size: 0.97rem;
}

/* ---------- PASTILLES ---------- */

.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pastilles span {
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  color: var(--encre-douce);
  background: var(--papier);
}

/* ---------- ENCART ---------- */

.encart {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.5rem;
}

.section-encre .encart {
  background: oklch(0.99 0 0 / 0.06);
  border-color: oklch(0.99 0 0 / 0.14);
}

.note {
  font-size: 0.86rem;
  color: var(--encre-douce);
}

/* ---------- FIL D'ARIANE ---------- */

.ariane {
  font-size: 0.82rem;
  color: var(--encre-douce);
}

.ariane a {
  color: var(--encre-douce);
  text-decoration: none;
}

.ariane a:hover {
  color: var(--encre);
}

/* ---------- CONTENU WORDPRESS INJECTE (pages legales) ---------- */

.contenu-wp {
  max-width: 68ch;
}

.contenu-wp h2,
.contenu-wp h3 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.contenu-wp p,
.contenu-wp ul,
.contenu-wp ol {
  margin-block: 0 1rem;
  color: var(--encre-douce);
}

.contenu-wp ul,
.contenu-wp ol {
  padding-left: 1.25rem;
}

/* ---------- PIED ---------- */

.pied {
  border-top: 1px solid var(--filet);
  padding-block: 3rem 2rem;
  font-size: 0.92rem;
  color: var(--encre-douce);
  background: var(--surface);
}

.pied-grille {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.pied a {
  color: var(--encre-douce);
}

.pied a:hover {
  color: var(--encre);
}

.pied-liens {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.pied-bas {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  font-size: 0.82rem;
}

/* ---------- BARRE D'APPEL MOBILE ---------- */

.barre-appel {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-barre-appel);
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom));
  background: oklch(0.99 0 0 / 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--filet);
}

.barre-appel .bouton {
  flex: 1;
}

@media (max-width: 47.9375rem) {
  .nav a:not(.bouton) {
    display: none;
  }
  .barre-appel {
    display: flex;
  }
  body {
    padding-bottom: 4.5rem;
  }
}

/* ---------- ACCESSIBILITE ---------- */

:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
}

.saut-contenu:focus {
  left: var(--gouttiere);
  top: 0.5rem;
  z-index: 999;
  background: var(--papier);
  padding: 0.6rem 1rem;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-2);
}

/* Les revelations partent d'un etat DEJA VISIBLE : si le script ne tourne pas,
   si l'onglet est en arriere-plan ou si le rendu est fait sans JavaScript, la
   page reste lisible. Une revelation qui conditionne l'affichage finit toujours
   par livrer une page blanche quelque part. */
@media (prefers-reduced-motion: no-preference) {
  .revele {
    opacity: 0;
    transform: translateY(0.75rem);
    animation: apparait var(--duree) var(--sortie) forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}

@keyframes apparait {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}