/* ==========================================================================
   OrdiNovice - feuille de styles de base
   Charte graphique v1.0 du 28 août 2026
   Piste A, bleu ardoise et terre cuite. Logo 01, sans le .fr.
   Aucune police téléchargée. Aucun cookie. Cible : moins de 12 ko par page.
   ========================================================================== */

:root {
  /* Couleurs. Ne jamais en ajouter sans vérifier le contraste. */
  --bleu:      #12395E;   /* titres, en-tête, aplats            */
  --terre:     #8A3008;   /* action principale, uniquement      */
  --sable:     #EFC7A6;   /* accent, uniquement sur fond bleu   */
  --clair:     #EEF3F8;   /* fonds de section                   */
  --texte:     #1B2B3A;   /* texte courant                      */
  --ardoise:   #3E4C5A;   /* texte secondaire, légendes         */
  --vert:      #14563A;   /* confirmation d'envoi               */
  --blanc:     #FFFFFF;
  --bord:      #C9D6E3;

  /* Espacements. Multiples de 4. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --rayon:  6px;
  --rayon-bloc: 10px;
  --cible: 48px;          /* hauteur minimale de toute zone cliquable */
  --largeur: 680px;       /* 65 caractères environ */
}

/* --------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;        /* jamais moins de 19 */
  line-height: 1.6;
}

@media (max-width: 480px) { body { font-size: 19px; } }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--e4); }

/* ------------------------------------------------------------- titres --- */

h1, h2, h3 { color: var(--bleu); font-weight: 600; line-height: 1.25; margin: 0 0 var(--e3); }
h1 { font-size: 34px; }
h2 { font-size: 28px; margin-top: var(--e7); }
h3 { font-size: 24px; margin-top: var(--e6); }

@media (max-width: 480px) { h1 { font-size: 30px; } h2 { font-size: 25px; } h3 { font-size: 22px; } }

p { margin: 0 0 var(--e4); }
.chapeau { font-size: 22px; color: var(--texte); }
.legende { font-size: 17px; color: var(--ardoise); }

/* -------------------------------------------------------------- liens --- */
/* Toujours soulignés. La couleur seule ne suffit pas à signaler un lien. */

a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Le focus doit rester visible : certains visiteurs naviguent au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--terre);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ en-tête --- */

.entete { background: var(--bleu); color: var(--blanc); }
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap; padding-top: var(--e3); padding-bottom: var(--e3);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blanc); }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo .mot { font-size: 22px; font-weight: 600; white-space: nowrap; }
.logo .mot span { color: var(--sable); }

/* Le téléphone est l'action principale du site. Il est présent sur chaque page. */
.tel {
  font-size: 22px; font-weight: 700; color: var(--blanc);
  text-decoration: none; white-space: nowrap;
  min-height: var(--cible); display: inline-flex; align-items: center;
}

/* Le menu porte toujours le mot « Menu ». Jamais trois traits seuls. */
.menu { background: var(--clair); }
.menu a {
  display: inline-flex; align-items: center; min-height: var(--cible);
  padding: 0 var(--e3); font-size: 18px; color: var(--bleu); text-decoration: none;
}
.menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.menu .mot-menu { font-weight: 700; color: var(--bleu); padding: 0 var(--e3); }

/* ------------------------------------------------------------ boutons --- */

.bouton, .bouton-2 {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 22px; border-radius: var(--rayon);
  font-size: 19px; font-weight: 700; text-decoration: none; border: 2px solid transparent;
  cursor: pointer;
}
.bouton   { background: var(--terre); color: var(--blanc); }      /* 8,4:1 */
.bouton-2 { background: var(--blanc); color: var(--bleu); border-color: var(--bleu); }
.bouton:hover   { background: #752906; }
.bouton-2:hover { background: var(--clair); }

/* Sur fond bleu, la terre cuite ne passe pas. On inverse. */
.entete .bouton, .sur-bleu .bouton { background: var(--sable); color: var(--bleu); }

/* ------------------------------------------------------------- blocs ---- */

.section-claire { background: var(--clair); padding: var(--e7) 0; }
.bloc {
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon-bloc); padding: var(--e5);
}
.encart {
  background: var(--clair); border-left: 6px solid var(--bleu);
  padding: var(--e4) var(--e5); margin: var(--e5) 0;
}

/* Les quatre preuves : pictogrammes épais et figuratifs, jamais abstraits. */
.preuves { display: flex; flex-wrap: wrap; gap: var(--e4); padding: 0; margin: var(--e5) 0; list-style: none; }
.preuves li { flex: 1 1 240px; display: flex; gap: var(--e3); align-items: flex-start; font-size: 19px; }
.preuves svg { width: 32px; height: 32px; flex: none; }

/* --------------------------------------------------------- tarifs ------- */

.tarifs { width: 100%; border-collapse: collapse; font-size: 19px; }
.tarifs th, .tarifs td { text-align: left; padding: var(--e3) var(--e2); border-bottom: 1px solid var(--bord); vertical-align: top; }
.tarifs th { color: var(--bleu); }
.tarifs .prix { font-weight: 700; color: var(--bleu); white-space: nowrap; }

/* ------------------------------------------------------- formulaire ----- */
/* Le libellé est toujours au-dessus du champ. Jamais dans le champ. */

.champ { margin-bottom: var(--e5); }
.champ label { display: block; font-size: 19px; font-weight: 600; color: var(--bleu); margin-bottom: var(--e2); }
.champ input, .champ textarea {
  width: 100%; min-height: 52px; padding: 12px var(--e3); font-size: 19px;
  font-family: inherit; color: var(--texte);
  border: 2px solid var(--ardoise); border-radius: var(--rayon); background: var(--blanc);
}
.champ textarea { min-height: 160px; }
.aide { font-size: 17px; color: var(--ardoise); margin-top: var(--e1); }
.confirmation { color: var(--vert); font-weight: 700; }

/* Piège à robots. Retiré de l'affichage et du parcours au clavier. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------- images ------- */

img { max-width: 100%; height: auto; display: block; }
.portrait { border-radius: var(--rayon-bloc); }

/* ------------------------------------------------------ pied de page ---- */

.pied { background: var(--bleu); color: var(--blanc); padding: var(--e7) 0 var(--e5); font-size: 18px; }
.pied a { color: var(--sable); }

/* --------------------------------------------------------- rendez-vous -- */
/* Cal.com est inséré en cadre, jamais en script. Le lien de secours reste visible. */

.agenda { width: 100%; min-height: 640px; border: 1px solid var(--bord); border-radius: var(--rayon-bloc); }
.agenda-secours { margin-top: var(--e3); }

/* ---------------------------------------------------------- impression -- */

@media print {
  .entete, .menu, .pied, .agenda { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* =========================================================================
   Composants ajoutés en phase 5
   ========================================================================= */

.evitement{position:absolute;left:-9999px;background:var(--blanc);color:var(--bleu);
  padding:var(--e3) var(--e4);z-index:10}
.evitement:focus{left:var(--e4);top:var(--e2)}

.entete .conteneur{padding-top:var(--e3);padding-bottom:var(--e3)}
.logo .marque{display:inline-flex}
.logo .marque svg{width:34px;height:34px}
.menu .conteneur{display:flex;flex-wrap:wrap;align-items:center}

section{padding:var(--e6) 0}
section:first-of-type{padding-top:var(--e5)}
.hero{padding-bottom:var(--e5)}
.actions{margin:var(--e5) 0 0;display:flex;flex-wrap:wrap;gap:var(--e2)}
.actions .bouton-2{margin:0}
.mentions{font-size:17px;color:var(--ardoise)}

.trois{display:flex;flex-wrap:wrap;gap:var(--e5);margin:var(--e4) 0}
.trois>div{flex:1 1 260px}
.trois h3{margin:var(--e1) 0 var(--e2)}
.mode{display:inline-block;font-size:15px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--terre);background:#F6E7DE;border-radius:4px;padding:3px 9px}
.prix{font-weight:700;color:var(--bleu);white-space:nowrap}

.preuves b,.preuves strong{display:block}
.preuves li{align-items:flex-start}

.presta{border:1px solid var(--bord);border-radius:var(--rayon-bloc);
  padding:var(--e5);margin:0 0 var(--e5)}
.presta h2{margin:var(--e1) 0 var(--e2);font-size:24px}
.presta ul{margin:var(--e3) 0 0;padding-left:22px}
.presta li{margin:var(--e1) 0}
.tarif{font-size:24px;font-weight:700;color:var(--bleu);margin:var(--e3) 0 0}
.tarif span{display:block;font-size:17px;font-weight:400;color:var(--ardoise);margin-top:2px}

.portrait{max-width:320px;margin:0 0 var(--e5)}
.repere{display:flex;gap:var(--e4);align-items:flex-start;margin:0 0 var(--e3)}
.repere .an{flex:none;width:76px;font-weight:700;color:var(--terre)}
.limites{padding-left:22px}
.limites li{margin:var(--e2) 0}

.liste-actus{list-style:none;padding:0;margin:var(--e3) 0}
.liste-actus li{margin:0 0 var(--e3)}
.liste-actus .date{display:block;font-size:17px;color:var(--ardoise)}
.billet{border-bottom:1px solid var(--bord);padding-bottom:var(--e5);margin-bottom:var(--e5)}
.billet:last-of-type{border:0}
.billet h2{margin-bottom:var(--e1)}
.billet .date{font-size:17px;color:var(--ardoise);margin-bottom:var(--e3)}

.tel-bloc{background:var(--clair);border-left:6px solid var(--terre);
  padding:var(--e5);margin:0 0 var(--e5)}
.tel-bloc .dispo{margin:0 0 var(--e1);font-size:19px}
.tel-bloc .numero{display:block;font-size:34px;font-weight:700;color:var(--bleu);
  text-decoration:none;line-height:1.15;margin:0 0 var(--e3)}
.tel-bloc p{margin:0 0 var(--e3)}
.tel-bloc p:last-child{margin:0}
.communes{font-size:18px;line-height:1.9}

.formulaire{margin:var(--e4) 0 0}
button.bouton{font-family:inherit}

.sommaire{background:var(--clair);border-left:6px solid var(--bleu);
  padding:var(--e4) var(--e5);margin:0 0 var(--e6)}
.sommaire a{display:block;padding:var(--e2) 0;min-height:40px}
.a-completer{background:#F6E7DE;color:var(--terre);padding:1px 6px;border-radius:3px;font-weight:600}
main h3{font-size:20px}

.pied .conteneur p{margin:0 0 var(--e2)}
.pied .mentions{color:#C9D8E6;font-size:17px}