/* ---------------------------------------------------------------------
   Pages internes — complement de site.css, jamais un remplacement.
   Aucune couleur en dur : tout passe par les variables de site.css, donc
   les deux themes et les bandeaux .sombre fonctionnent sans reglage.
   --------------------------------------------------------------------- */

/* Fil d'Ariane. Il dit au visiteur ou il se trouve, et donne a Google la
   hierarchie du site — que le balisage BreadcrumbList confirme. */
.fil{border-bottom:1px solid var(--trait);background:var(--fond-alt)}
.fil .zone{padding-top:11px;padding-bottom:11px;font-size:14px;color:var(--pale)}
/* Souligne, et pas seulement colore : axe-core mesurait 1,05:1 de
   contraste entre ce lien et le texte voisin, la ou il en faut 3 pour
   distinguer un lien par la couleur seule. Qui distingue mal les
   couleurs ne voyait pas qu'il y avait un lien. */
.fil a{color:var(--doux);text-decoration:underline;text-underline-offset:3px}
.fil a:hover{color:var(--vert);text-decoration:underline}

.page{padding:52px 0 20px}
.page .zone{max-width:820px}
.page h1{
  font-family:var(--titre);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(30px,5.2vw,45px);line-height:1.12;margin:0 0 18px;
}
.page .chapeau{font-size:19px;line-height:1.6;color:var(--doux);margin:0 0 8px}
.page h2{
  font-family:var(--titre);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(23px,3.6vw,31px);line-height:1.2;margin:46px 0 14px;
}
.page h3{font-size:18.5px;font-weight:700;margin:30px 0 8px}
.page p,.page li{font-size:17px;line-height:1.68}
.page ul{padding-left:20px}
.page li{margin:7px 0}
/* :not(.bouton) — CORRECTION DU 26 AOUT 2026.
   Sans cette exclusion, cette regle repeignait AUSSI le texte des boutons
   verts, qui se retrouvait exactement de la couleur de son propre fond :
   1,00:1 de contraste, dans les DEUX themes. Le bouton « Voir mon site
   gratuitement » des trois pages metier etait vide a l'oeil depuis leur
   creation.
   Pourquoi elle gagnait : `.page a` vaut (0,1,1) contre (0,1,0) pour
   `.bouton`, et pages.css se charge apres site.css. Deux raisons de gagner
   plutot qu'une.
   Lecon : une regle de couleur de LIEN posee sur un conteneur entier finit
   toujours par atteindre un bouton. On l'exclut des l'ecriture. */
.page a:not(.bouton){color:var(--vert)}
.page strong{color:var(--texte)}

/* Encadre : la reponse courte a une question, mise en avant. */
.note{
  background:var(--vert-clair);border-left:3px solid var(--vert);
  border-radius:0 var(--rayon) var(--rayon) 0;
  padding:17px 20px;margin:24px 0;
}
.note p:first-child{margin-top:0}
.note p:last-child{margin-bottom:0}

/* Grille de cartes : « ce que vous obtenez », « les objections ». */
.grille{display:grid;gap:15px;margin:26px 0;
  /* stretch est deja la valeur par defaut d'une grille ; on l'ecrit pour que
     personne ne la croie absente et n'aille chercher ailleurs. */
  align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.grille .bloc{
  background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:19px 20px;box-shadow:var(--ombre-douce);
  /* margin-top:0 — CORRECTION DU 26 AOUT 2026, ET LA VRAIE CAUSE DU
     DESALIGNEMENT.
     site.css pose `.bloc{margin-top:56px}` et `.bloc:first-of-type{34px}`
     pour les quatre blocs hierarchises de la page d'accueil. Ces regles
     atteignaient AUSSI les cartes de cette grille, qui portent la meme
     classe. Consequence : la premiere carte commencait 22 px plus haut que
     ses voisines de rangee, et s'etirait donc 22 px plus bas.
     Ce n'etait PAS un probleme de longueur de texte : les hauteurs d'une
     meme rangee etaient deja egales (une grille etire ses elements par
     defaut). C'etait la MARGE qui differait. Mesure avant de corriger :
     rangee a 1280 px -> 252 px, 230 px, 230 px.
     L'espacement vertical vient de `gap`, pas d'une marge. */
  margin-top:0;
  height:100%;
}
.grille .bloc h3{margin:0 0 7px;font-size:17px}
.grille .bloc p{margin:0;font-size:15.5px;color:var(--doux);line-height:1.6}

/* Questions / reponses depliables. <details> est natif : il fonctionne
   sans JavaScript, et un moteur lit son contenu meme replie. */
.page details{
  border:1px solid var(--trait);border-radius:var(--rayon);
  padding:15px 18px;margin:11px 0;background:var(--carte);
}
.page details[open]{border-color:var(--vert)}
.page summary{font-weight:700;cursor:pointer;font-size:16.5px;line-height:1.5}
.page summary::marker{color:var(--vert)}
.page details p{margin:11px 0 2px;color:var(--doux);font-size:16px}

/* Appel a l'action de fin de page. */
.fin{margin:52px 0 60px;padding:34px 30px;border-radius:20px;
  background:var(--vert-clair);border:1px solid var(--trait);text-align:center}
.fin h2{margin:0 0 10px}
.fin p{color:var(--doux);margin:0 0 22px}

/* Liens entre pages soeurs : c'est le maillage interne, la chose qui
   manquait totalement quand le site n'avait qu'une page. */
.soeurs{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--trait)}
.soeurs h2{font-size:19px;margin:0 0 13px;font-family:inherit;font-weight:700}
.soeurs ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.soeurs li{margin:0}
.soeurs a{
  display:inline-block;padding:9px 15px;border:1px solid var(--trait);
  border-radius:999px;text-decoration:none;font-size:15px;background:var(--carte);
}
.soeurs a:hover{border-color:var(--vert);background:var(--vert-clair)}

/* Tableau des tarifs rappele en page interne. */
.page table{width:100%;border-collapse:collapse;margin:22px 0;font-size:16px}
.page th,.page td{padding:11px 13px;border-bottom:1px solid var(--trait);text-align:left}
.page th{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--pale)}
.page td strong{color:var(--vert)}
.tableau-large{overflow-x:auto}
/* Un conteneur rendu focalisable doit montrer qu'il a le focus, sinon
   la tabulation semble disparaitre dans le vide. */
.tableau-large:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:6px}

@media (max-width:640px){
  .page{padding:34px 0 14px}
  .page h2{margin-top:36px}
  .fin{padding:27px 20px;margin-bottom:44px}
}

/* Portrait de la page « Qui fait ces sites ».
   width/height sont fixes dans le HTML : sans eux, le texte saute au moment
   ou l'image arrive. La photo est servie en AVIF puis WebP, en simple et
   double densite — un ecran de telephone recent affiche la version 512. */
.portrait{margin:30px 0 34px;text-align:center}
.portrait img{
  width:160px;height:160px;border-radius:50%;object-fit:cover;
  border:1px solid var(--trait);box-shadow:var(--ombre-douce);
}
.portrait figcaption{
  margin-top:12px;font-size:14px;color:var(--pale);
  letter-spacing:.04em;text-transform:uppercase;font-weight:700;
}