/* Les sections 6 et 7 de l’accueil (ancres #questions et #faq, #contact et #equipe), reprises TEL QUEL du prototype publié
   (sections-6-7, version 3, 1792670793-a584, md5 ab5a51a5 ; textes v1 relus ; plan visuel v1.4 ; pas de fin de page : décision
   n° 17 d’Alex du 22/10). Règles portées sous #questions, #contact, ou les deux (§ 2.7 du plan v2.1) ; barre, pied, page, noms
   courts, bandeau et sélecteur d'états retirés (gabarit et commun.css). Couleurs, espaces, rayons, mouvement : jetons de la charte. */

:is(#questions, #contact) .icone { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
:is(#questions, #contact) .icone path { vector-effect: non-scaling-stroke; }

#contact .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
#contact .btn.borde { background: var(--feuille); color: var(--encre); border: 0; box-shadow: inset 0 0 0 2px var(--encre); }
#contact .btn.borde:hover { background: var(--brume); }
#contact .btn.grand { padding: 0 24px; font-size: 16px; }   /* les boutons hors de la barre, comme ceux de l’ouverture */

/* les espaces de la charte que lisent ces deux sections et que le commun ne déclare pas (encore : DEMANDE au rapport) : déclarés
   sous elles, mêmes valeurs que le :root du prototype ; et l'écart avant le pied, que le prototype posait sous sa .page (la section 7
   est la dernière avant le pied) : une marge, qui ne change pas la boîte de la section */
:is(#questions, #contact) { --entre-sections: 64px; --sous-titre: 32px; }   /* espace.9 : 96 px entre deux sections, 64 au téléphone ; espace.7 : 48 px entre le titre d’une section et son contenu, 32 au téléphone */
@media (min-width: 744px) { :is(#questions, #contact) { --entre-sections: 96px; --sous-titre: 48px; } }   /* la tablette dès 744 px, l’iPad mini tenu debout (décision n° 34 d’Alex) */
#contact { margin-bottom: var(--entre-sections); }   /* la section 7, dernière avant le pied : l’écart entre deux sections */
/* les sections : 12 colonnes dès 1 024 px (contenu de 1 280 px au plus, gouttière de 24 px), titres sur les colonnes 1 à 8 */

:is(#questions, #contact) { position: relative; margin-top: var(--entre-sections); }
:is(#questions, #contact) .ancre { position: absolute; top: 0; left: 0; }   /* l’autre nom de la section (#faq, #equipe), sans prendre de place */
:is(#questions, #contact) h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; color: var(--encre); text-wrap: balance; }
@media (min-width: 744px) { :is(#questions, #contact) h2 { font-size: 40px; letter-spacing: -0.03em; } }
:is(#questions, #contact) > h2 + * { margin-top: var(--sous-titre); }
:is(#questions, #contact) .lien { color: var(--bleu-plan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(#questions, #contact) .lien:hover { text-decoration-thickness: 2px; }
:is(#questions, #contact) .lien.dans-le-texte { position: relative; white-space: nowrap; }   /* d’un seul tenant : la zone de toucher suit une seule boîte */
:is(#questions, #contact) .lien.dans-le-texte::after { content: ''; position: absolute; inset: -12px -4px; }   /* 44 px de cible au moins, sans toucher à la ligne */
:is(#questions, #contact) .mot { white-space: nowrap; }   /* un mot composé (est-il, e-mails, écrivez-nous) ne se coupe pas à son trait d’union */
:is(#questions, #contact) :is(.btn, .lien, .faq summary, .formulaire input, .formulaire textarea):focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; }

/* section 6 : cinq questions repliées, l’élément natif (details et summary), sans script ; une ligne par question entre deux
   filets de grille, alignée sur le titre ; au survol, la question se souligne ; le signe plus devient moins quand la réponse
   est ouverte ; une question sur deux lignes les équilibre (au téléphone, jamais « calcul ? » seul en bas) */
#questions .faq details { border-bottom: 1px solid var(--grille); }
#questions .faq details:first-child { border-top: 1px solid var(--grille); }
#questions .faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 16px 0; font-size: 18px; line-height: 27px; font-weight: 500; color: var(--encre); cursor: pointer; list-style: none; text-wrap: balance; }
#questions .faq summary::-webkit-details-marker { display: none; }
#questions .faq summary:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#questions .faq summary .icone { width: 24px; height: 24px; margin-top: 1.5px; }
#questions .faq details[open] .icone .barre-verticale { display: none; }
#questions .faq .reponse { padding: 0 0 24px; }
/* 48ch de Jost (son « 0 » est large) : 60 à 75 signes par ligne, même pour un texte dense en signes étroits (v3 : 77 à 50ch) */
#questions .faq .reponse p { margin: 0; max-width: 48ch; font-size: 18px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }

/* section 7 : le texte et la signature à gauche, le formulaire à droite (plan du site, section 7) */
#contact .mot-equipe { margin: 0; max-width: 50ch; font-size: 18px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
#contact .signature { margin: 16px 0 0; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--encre); text-wrap: balance; }   /* à 320 px : « fondateur d’AXIOM » reste d’un tenant */
#contact .adresse { margin: 4px 0 0; }
#contact .adresse .lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
#contact .ecrire { margin-top: var(--sous-titre); }
#contact .formulaire { display: grid; gap: 24px; max-width: 520px; margin: 0; }   /* au bureau, sa largeur est celle de ses colonnes (de la 7 à la 11 ou à la 12) */
#contact .gauche > h2 + .equipe { margin-top: var(--sous-titre); }
#contact .champ { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
#contact .champ > label, #contact .champ legend { padding: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--encre); }
#contact .formulaire input:not([type="radio"]), #contact .formulaire textarea { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 6px; background: var(--feuille); font: inherit; font-size: 16px; line-height: 1.5; color: var(--encre); }
#contact .formulaire textarea { height: auto; min-height: 168px; padding: 10px 12px; resize: vertical; }
/* l’erreur, entre le libellé et le champ (charte, Champs et choix) : l’icône et ce qui manque, en cramoisi ; le bord du champ doublé */
#contact .erreur { display: flex; align-items: flex-start; gap: 8px; max-width: 52ch; margin: 0; font-size: 15px; line-height: 1.5; color: var(--cramoisi); text-wrap: pretty; }
#contact .erreur .icone { width: 16px; height: 16px; margin-top: 3px; }
#contact .champ.en-erreur input, #contact .champ.en-erreur textarea { border: 2px solid var(--cramoisi); padding-inline: 11px; }
#contact .champ.en-erreur textarea { padding-block: 9px; }
#contact .aide { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--encre-3); text-wrap: pretty; }   /* les aides, erreurs et messages ne finissent jamais sur un mot seul (« activité. » à 390 px) */
#contact .champ legend { margin-bottom: 4px; }
#contact .choix { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; line-height: 22px; color: var(--encre); cursor: pointer; }
#contact .champ > label.choix { font-weight: 400; }
/* les boutons radio dessinés dans les couleurs de la charte (20 px, bord filet, choisi en encre), jamais le gris du navigateur */
#contact .choix input { appearance: none; flex: 0 0 auto; display: grid; place-content: center; width: 20px; height: 20px; margin: 0; border: 2px solid var(--filet); border-radius: 50%; background: var(--feuille); cursor: pointer; }
#contact .choix input::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--encre); transform: scale(0); }
#contact .choix input:checked { border-color: var(--encre); }
#contact .choix input:checked::before { transform: scale(1); }
#contact .choix input:focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; }
#contact .envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
#contact .btn[aria-disabled="true"] { background: var(--grille); color: var(--encre-3); box-shadow: none; cursor: progress; }   /* envoi en cours : le bouton le dit lui-même */
/* les messages (charte, Messages) : fond blanc, bord d'1 px dans la couleur de l’état, icône et titre en couleur, texte en encre 2 */
#contact .message { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; margin: 0; padding: 12px 16px; border: 1px solid var(--cramoisi); border-radius: 8px; background: var(--feuille); font-size: 16px; line-height: 1.5; }
#contact .message .icone { width: 16px; height: 16px; margin-top: 4px; color: var(--cramoisi); }
#contact .message .titre { margin: 0; font-weight: 500; color: var(--cramoisi); }
#contact .message .texte { grid-column: 2; margin: 0; color: var(--encre-2); text-wrap: pretty; }
#contact .retour:empty { position: absolute; }   /* vide, il reste dans l’arbre lu (une zone annoncée doit exister avant son texte), sans prendre de rang dans la grille */
#contact .envoye { max-width: 520px; border-color: var(--vert); font-size: 18px; }
#contact .envoye .icone, #contact .envoye .titre { color: var(--vert); }
#contact .envoye .icone { margin-top: 6px; }
#contact .envoye:focus { outline: none; }
@media (min-width: 1024px) {
  :is(#questions, #contact) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--sous-titre); align-items: start; }
  :is(#questions, #contact) > h2 + * { margin-top: 0; }
  :is(#questions, #contact) > h2, #questions .faq { grid-column: 1 / span 8; }
  /* section 7 : le titre et le texte à gauche (colonnes 1 à 5), collés ensemble pendant qu’on remplit le formulaire, là où le lien
     « Contact » les pose (16 px sous la barre, son filet compté) ; le formulaire à droite dès la ligne du titre */
  #contact .gauche { grid-column: 1 / span 5; position: sticky; top: calc(var(--barre) + 1px + 16px + env(safe-area-inset-top, 0px)); }
  #contact .ecrire { grid-column: 7 / span 6; margin-top: 0; }
  #contact .formulaire, #contact .envoye { max-width: none; }
  #contact .mot-equipe { max-width: none; font-size: 24px; line-height: 1.5; }
  /* les deux objets sur une ligne quand ils y tiennent */
  #contact #s7-champ-objet { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; }
  #contact #s7-champ-objet .aide { flex: 1 0 100%; }
}
@media (min-width: 1280px) { #contact .ecrire { grid-column: 7 / span 5; } }   /* le bord droit sur la fin de la colonne 11 (environ 520 px) */

/* couleurs forcées (Windows) : l’ombre intérieure des boutons bordés disparaît, un vrai bord la remplace */
@media (forced-colors: active) {
  #contact .btn.borde { border: 2px solid ButtonText; }
  #contact .message { border-color: CanvasText; }
  #contact .choix input { appearance: auto; }   /* le bouton radio du système, que le mode dessine lui-même */
}