/* Page À propos (2026-10-26, choix 2 d'Alexandre sur maquettes) : bande noire avec le titre (css/site.css), la vidéo en
   grand qui déborde sur la bande, le premier paragraphe en gros caractères, deux colonnes de texte, la photo d'équipe sur
   une bande grise, la conclusion avec le bouton « Estimation gratuite » */
.apropos-video { position: relative; margin-top: calc(-1 * var(--chevauche)); padding-bottom: var(--espace-blocs); }
.page-video { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--rayon); background: var(--noir); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); cursor: pointer; }  /* ouvre la fenêtre vidéo commune */
.page-video:hover .rond-jouer { transform: scale(1.08); }
.page-video picture, .page-video img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.page-video .rond-jouer { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.page-video .rond-jouer .ico { width: 24px; height: 24px; }
.apropos-intro { max-width: 52em; margin-top: var(--espace-blocs); font-size: clamp(19px, 1.9vw, 25px); line-height: 1.55; letter-spacing: -0.01em; color: var(--encre); }
.apropos-intro strong { font-weight: 600; }
.apropos-deux { padding-bottom: var(--espace); }
.apropos-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.apropos-colonnes p + p { margin-top: 0; }
.apropos-equipe { padding: var(--espace) 0; background: var(--carte); }
.apropos-equipe-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.apropos-photo img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.apropos-sceau img { width: 96px; height: 96px; margin-bottom: 24px; }
.apropos-equipe p { font-size: 18px; }
.apropos-conclure { padding: var(--espace-blocs) 0 var(--espace); }
.apropos-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 56px; }
.apropos-fin p { flex: 1 1 28em; max-width: 44em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--encre); }
.apropos-fin strong { font-weight: 600; }
.apropos-equipe:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .apropos-colonnes, .apropos-equipe-grille { grid-template-columns: minmax(0, 1fr); }
  .apropos-colonnes { gap: 14px; }
}
@media (max-width: 699px) {
  .page-video picture, .page-video img { aspect-ratio: 16 / 9; }
  .page-video .rond-jouer { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .apropos-intro { font-size: 19px; }
  .apropos-equipe p { font-size: 17px; }
  .apropos-fin p { flex-basis: auto; }
}

/* Page Équipe (2026-10-26, choix 2 d'Alexandre sur maquettes) : bande noire avec le titre seul, le texte, puis sur une bande
   grise les fiches (nom, poste en petit au-dessus); sous chaque chargé de projet, « Lui écrire » ouvre le formulaire Contact */
.bande-seule { padding-bottom: 72px; }  /* bande noire sans rien qui déborde dessus (Équipe, Services) */
.equipe-intro { padding: var(--espace-blocs) 0 var(--espace); }
.equipe-texte { max-width: 60em; margin-top: 28px; }
.equipe-gens { padding: var(--espace) 0; background: var(--carte); }
.equipe-titre { font-size: clamp(24px, 2.4vw, 32px); }
.equipe-titre-suivant { margin-top: var(--espace-blocs); }
.equipe-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(16px, 2vw, 32px); margin-top: 32px; }
/* liste de l'administration (js/site.js) : la liste écrite dans la page reste cachée le temps de la réponse, pour ne pas
   la voir apparaître puis changer; montrée quand même après 1,5 s (sans JavaScript, ou si l'administration ne répond pas) */
.equipe-liste[data-equipe]:not(.equipe-prete) { visibility: hidden; animation: equipe-montrer 0s 1.5s forwards; }
@keyframes equipe-montrer { to { visibility: visible; } }
.equipe-liste li { display: flex; flex-direction: column; padding: 28px; border-radius: 20px; background: var(--blanc); }
.equipe-role { order: -1; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--encre); }  /* au-dessus du nom, comme la page actuelle (le nom reste le titre de la fiche) */
.equipe-nom { margin-top: 6px; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; color: var(--encre); }
.equipe-ecrire { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.equipe-ecrire:hover { color: var(--accent-fonce); }
.equipe-ecrire .ico { width: 14px; height: 14px; transition: transform .2s; }
.equipe-ecrire:hover .ico { transform: translateX(3px); }

@media (max-width: 1024px) { .equipe-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .equipe-liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .equipe-liste li { padding: 22px; }
}

/* Page Services (2026-10-26) : sous-titre et cartes des familles (.familles, css/site.css), comme la page actuelle */
.services-index { padding: var(--espace-blocs) 0 var(--espace); }
.services-index .familles { row-gap: clamp(56px, 6vw, 80px); }

/* Page Nos certifications (2026-10-27) : la phrase d'accroche, puis chaque certification avec son certificat en image,
   en alternance gauche / droite comme la page actuelle; un clic sur le certificat l'ouvre en grand (visionneuse) */
.certifs { padding: var(--espace-blocs) 0 var(--espace); }
.certifs-accroche { max-width: 30em; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
.certif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: var(--espace-blocs); }
.certif-inverse .certif-texte { order: 2; }
.certif-texte .texte { margin-top: 20px; }
.certif-texte .pilule { margin-top: 28px; }
.certif-image { display: block; overflow: hidden; border-radius: 16px; background: var(--blanc); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .35), 0 0 0 1px var(--ligne); cursor: zoom-in; }
.certif-image img { display: block; width: 100%; height: auto; transition: transform .5s; }
.certif-image:hover img { transform: scale(1.02); }
@media (max-width: 1024px) {
  .certif { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .certif-inverse .certif-texte { order: 0; }
}

/* Page Carrière et offres d'emploi (2026-10-27) : bande noire, puis une carte blanche qui déborde sur la bande
   (« Candidature spontanée », ou le formulaire de candidature d'une offre) */
.bande-surtitre { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .72); }
.bande-surtitre + h1 { margin-top: 8px; }
.carriere-zone { position: relative; margin-top: calc(-1 * var(--chevauche)); padding-bottom: var(--espace); }
.carriere-zone .cadre > * { max-width: 860px; }  /* cartes alignées à gauche sur le titre de la bande (Alexandre, 2026-10-28) */
.carriere-carte { padding: clamp(28px, 4vw, 52px); border-radius: var(--rayon); background: var(--blanc); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .3), 0 0 0 1px var(--ligne); }
.carriere-carte .petit { margin: 16px 0 28px; }
.carriere-offres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.carriere-formulaire fieldset { margin: 0; padding: 0; border: 0; }
.carriere-formulaire legend { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--encre); }
.carriere-formulaire .autorisation { display: grid; font-size: 15px; }  /* la case à côté de son texte (.champ label la mettait au-dessus) */

/* Offres d'emploi de l'administration (2026-10-28) : sur Carrière, la liste des offres ouvertes par métier (js/site.js),
   au-dessus de la candidature spontanée; la zone attend la liste (1,5 s au plus) pour ne pas sauter quand elle arrive.
   Page d'une offre (api/offre.js) : bande noire avec le nombre de postes, puis la vidéo d'embauche, le texte et le
   formulaire « Postuler ». */
.carriere-zone:has([data-offres]):not(.offres-pretes) { visibility: hidden; animation: equipe-montrer 0s 1.5s forwards; }
.carriere-carte .formulaire { padding: 0; }  /* le formulaire est déjà dans une carte : aligné sur son titre */
/* avec des offres : la liste à gauche, la candidature spontanée dans un petit carré à droite (dessous sur tablette et téléphone) */
.carriere-zone:has(.carriere-offres-liste:not([hidden])) .cadre { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.carriere-zone:has(.carriere-offres-liste:not([hidden])) .cadre > * { max-width: none; }
.carriere-offres-liste:not([hidden]) ~ .carriere-spontanee { padding: 32px; }
.carriere-offres-liste:not([hidden]) ~ .carriere-spontanee .titre { font-size: 26px; line-height: 1.15; }
.carriere-offres-liste:not([hidden]) ~ .carriere-spontanee .petit { margin: 12px 0 24px; font-size: 15px; }
@media (max-width: 1024px) {
  .carriere-zone:has(.carriere-offres-liste:not([hidden])) .cadre { grid-template-columns: minmax(0, 1fr); }
  .carriere-zone:has(.carriere-offres-liste:not([hidden])) .cadre > * { max-width: 860px; }
}
.offres-metier { margin-top: 28px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pale); }
.offres-liste { margin-top: 8px; border-top: 1px solid var(--ligne); }
.offre-lien { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; border-bottom: 1px solid var(--ligne); color: var(--encre); text-decoration: none; }
.offre-nom { display: grid; flex: 1; gap: 2px; }
.offre-nom strong { font-size: 18px; font-weight: 600; line-height: 1.3; }
.offre-nom small { font-size: 14px; color: var(--pale); }
.offre-postes { font-size: 14px; color: var(--texte); white-space: nowrap; }
.offre-lien .rond { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fond); transition: background .2s, color .2s; }
.offre-lien .rond .ico { width: 16px; height: 16px; }
.offre-lien:hover .rond { background: var(--encre); color: var(--blanc); }
.bande-offre .bande-sous-titre { margin-top: 14px; font-size: clamp(17px, 1.5vw, 20px); color: rgb(255 255 255 / .82); }
.bande-projet .pilule-contour { color: var(--blanc); border-color: rgb(255 255 255 / .55); }  /* sur la bande noire (offres, page introuvable) */
.bande-projet .pilule-contour:hover { background: var(--blanc); color: var(--encre); }
.carriere-zone .cadre > .offre-carte { max-width: none; }
.offre-haut { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.offre-haut-large, .offre-haut-seul { grid-template-columns: minmax(0, 1fr); }  /* vidéo horizontale au-dessus, ou pas de vidéo */
.offre-video { aspect-ratio: 16 / 9; margin: 0; border-radius: var(--rayon); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); }
.offre-video-verticale, .offre-video-verticale img, .offre-video-verticale iframe { aspect-ratio: 9 / 16; }
.offre-video-verticale img, .offre-video-verticale iframe { height: 100%; }
.offre-essentiel > :first-child { margin-top: 0; }
.offre-essentiel .pilule { margin-top: 28px; }
.offre-resume { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--encre); }
.offre-carte h2 { margin-top: 28px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }
.offre-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; margin-top: 44px; padding-top: 8px; border-top: 1px solid var(--ligne); }
.offre-postuler { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--ligne); scroll-margin-top: 110px; }
.offre-postuler h2 { margin: 0; font-size: 30px; letter-spacing: -0.02em; }
.offre-appel { margin-top: 10px; font-size: 15px; color: var(--texte); }
.offre-appel a { color: var(--encre); font-weight: 600; }
.offre-postuler .formulaire { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; }  /* nom et numéro côte à côte */
.offre-postuler .formulaire > :not(.champ-demi) { grid-column: 1 / -1; }
@media (max-width: 1024px) {  /* tablette et téléphone : une seule colonne, la vidéo d'abord */
  .offre-haut, .offre-postuler { grid-template-columns: minmax(0, 1fr); }
  .offre-postuler { gap: 20px; }
  .offre-video-verticale { width: min(100%, 380px); }
}
.offre-liste { margin-top: 12px; padding-left: 1.2em; list-style: disc; }
.offre-liste li { margin-top: 6px; line-height: 1.6; }
.offre-conditions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.offre-conditions div { padding: 16px 20px; border-radius: 12px; background: var(--fond); }
.offre-conditions dt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); }
.offre-conditions dd { margin: 4px 0 0; font-weight: 600; color: var(--encre); }
@media (max-width: 699px) {
  .offre-lien { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 4px 12px; }  /* nombre de postes sous le titre, flèche à droite */
  .offre-nom, .offre-postes { grid-column: 1; }
  .offre-lien .rond { grid-column: 2; grid-row: 1 / span 2; }
  .offre-postuler .formulaire { grid-template-columns: minmax(0, 1fr); }
}

/* Page introuvable (404, 2026-10-28) : la carte des liens utiles, comme la liste des offres de Carrière */
.page-introuvable .offres-liste { margin-top: 20px; }
.introuvable-appel { margin-top: 24px; font-size: 16px; color: var(--texte); }
.introuvable-appel a { color: var(--encre); font-weight: 600; }
.introuvable-en { margin-top: 10px; font-size: 14px; color: var(--pale); }
.introuvable-en a { color: var(--texte); }

/* Politique de confidentialité (2026-10-27) : bande noire (titre, date de mise à jour), puis le sommaire à gauche, qui suit
   la lecture, et le texte en une colonne de lecture; l'encadré « En bref » en haut. Tablette et téléphone : le sommaire
   passe au-dessus du texte, dans une boîte grise. */
.politique { padding: var(--espace-blocs) 0 var(--espace); }
.politique-grille { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: clamp(40px, 6vw, 96px); align-items: start; }
.politique-sommaire { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; }
.politique-sommaire p { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pale); }
.politique-sommaire ol { margin-top: 14px; border-left: 1px solid var(--ligne); }
.politique-sommaire a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.4; color: var(--texte); text-decoration: none; transition: color .2s, border-color .2s; }
.politique-sommaire a:hover { border-left-color: var(--encre); color: var(--encre); }
.politique-texte h2 { margin-top: clamp(48px, 5vw, 64px); font-size: clamp(24px, 2.3vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); scroll-margin-top: 120px; }
.politique-texte h2 + p, .politique-texte h2 + ul { margin-top: 16px; }
.politique-texte h3 + ul, .politique-texte h3 + p { margin-top: 0; }
.politique-texte ul + h3, .politique-texte p + h3 { margin-top: 28px; }
.politique-texte .pilule { margin: 6px 0 4px; }
.politique-texte code { padding: 1px 6px; border-radius: 6px; background: var(--carte); font-family: ui-monospace, Consolas, Menlo, monospace; font-size: .86em; color: var(--encre); white-space: nowrap; }
.politique-encadre { margin-bottom: 28px; padding: clamp(24px, 3vw, 36px); border-radius: var(--rayon); background: var(--carte); }
.politique-encadre p { font-weight: 500; color: var(--encre); }
.politique-encadre ul { margin-top: 14px; }
@media (max-width: 1024px) {
  .politique-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .politique-sommaire { position: static; max-height: none; padding: 24px 28px; border-radius: var(--rayon); border: 1px solid var(--ligne); }
  .politique-sommaire ol { columns: 2; column-gap: 32px; border-left: 0; }
  .politique-sommaire a { margin-left: 0; padding: 6px 0; border-left: 0; break-inside: avoid; }
}
@media (max-width: 699px) {
  .politique-sommaire ol { columns: 1; }
  .politique-sommaire a { padding: 9px 0; }  /* cibles tactiles d'au moins 44 px avec l'interligne */
  .politique-texte h2 { scroll-margin-top: 90px; }
}

/* Blogue (2026-10-27) : la liste (cartes photo des articles, qui débordent sur la bande noire) et l'article (sa photo
   déborde sur la bande, texte en colonne de lecture, partage, autres articles, formulaire commun) */
.blogue-liste { position: relative; margin-top: calc(-1 * var(--chevauche)); padding-bottom: var(--espace); }
.blogue-liste .autres-grille { margin-top: 0; }
.carte-article { min-height: 460px; }
.carte-article p { font-size: 15px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.article { --chevauche: clamp(110px, 13vw, 210px); position: relative; margin-top: calc(-1 * var(--chevauche)); }
.article-cadre { max-width: calc(860px + 2 * var(--gouttiere)); }
.article-photo, .article-photo img { display: block; width: 100%; }
.article-photo img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--rayon); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .35); }
.article-texte { margin-top: clamp(40px, 5vw, 64px); }
.article-texte h2 { margin: clamp(36px, 4vw, 48px) 0 12px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
.article-texte h2:first-child { margin-top: 0; }
.article-texte p, .article-texte li { font-size: 17px; }
.article-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.article-fin p { font-weight: 600; color: var(--encre); }
@media (max-width: 699px) {
  .article { --chevauche: 70px; }
  .carte-article { min-height: 380px; }
}

/* Plan du site (2026-10-27) : liste produite par l'assembleur (morceau partage:plan); groupes en colonnes */
.plan-zone { padding: var(--espace-blocs) 0 var(--espace); }
.plan-bloc + .plan-bloc { margin-top: var(--espace-blocs); padding-top: var(--espace-blocs); border-top: 1px solid var(--ligne); }
.plan-bloc h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
.plan-liste { columns: 3 220px; column-gap: 40px; margin-top: 20px; }
.plan-groupes { columns: 3 260px; column-gap: 40px; margin-top: 20px; }
.plan-groupe { break-inside: avoid; margin-bottom: 28px; }
.plan-groupe h3 { margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--encre); }
.plan-groupe h3 a { color: inherit; text-decoration: none; }
.plan-groupe h3 a:hover { color: var(--accent); }
.plan-liste li, .plan-groupe li { break-inside: avoid; }
.plan-liste a, .plan-groupe li a { display: inline-block; padding: 5px 0; font-size: 15px; line-height: 1.4; color: var(--texte); text-decoration: none; }
.plan-liste a:hover, .plan-groupe li a:hover { color: var(--accent); }
@media (max-width: 699px) {
  .plan-liste a, .plan-groupe li a { padding: 10px 0; }  /* cibles tactiles */
}