/* ==========================================================================
   JustiComm · accueil v4 · section « Les réponses à vos premières questions » · v5
   Octave, 14/10/2026 · présentation validée par Raoudha (pleine largeur, deux colonnes, numéros cuivre). À valider sur la maquette.

   Maquette : composants/faq-v5.html. Pour l’intégrer : recopier la section (commentaire « 8. » compris, données structurées comprises)
   dans index.html à la place de section#questions, et charger cette feuille après css/methode-fil.css. Toutes les classes commencent
   par faq5 ; les anciennes règles .faq4* (css/accueil-v4.css) et .faq__* (css/theme.css) ne servent plus à cette section.
   Composants repris tels quels : .section, .conteneur, .titre-section, boutons de la charte (.btn-plaque, .btn-cartouche, .btn--grand,
   .btn-direct, .ouverture__cta-icone), surfaces .surface-creme et .sur-clair.

   1. Titre sur toute la largeur du conteneur (comme « À quoi peut servir un outil IA »).
   2. Huit questions en <details>/<summary> : clavier natif (Tab, Entrée, Espace), lisibles sans JavaScript, la première ouverte.
      Deux colonnes indépendantes à partir de 64em (01 à 04, puis 05 à 08 : l’ordre du code est l’ordre de lecture) ; ouvrir
      une question ne décale jamais l’autre colonne. Une colonne en dessous.
   3. L’encadré « Une autre question ? » : double filet bronze, pictogramme cuivre, les deux boutons de la bande du haut de page.

   Tailles : corps 18 px (17 au téléphone, réglage de la page), questions 20 → 22 px (Cormorant 500), numéros 24 px partout,
   titre de l’encadré 28 → 34 px. Cibles : chaque question fait plus de 64 px de haut sur toute la largeur de sa carte.

   Couleurs (WCAG 2.x, calculées par script le 14/10/2026) : titre pétrole #0A393A sur crème 10,54:1 ; question pétrole sur la carte
   fermée #F5F1E9 11,23:1 et ouverte #FBF8F2 11,94:1 ; réponse et texte de l’encadré encre #172425 sur #FBF8F2 15,06:1 ;
   numéros cuivre #B06339 à 24 px (grand texte, seuil 3:1) 3,97:1 fermés et 4,22:1 ouverts ; signe +/− cuivre (composant, seuil 3:1)
   3,97:1 fermé, 3,90:1 ouvert ; contour de focus pétrole sur crème 10,54:1. Décor seulement (aucune information) : bord des cartes
   #DCD4C5 1,23:1, rond du signe 1,69:1, pictogramme de l’encadré 3,73:1. Le cuivre ne sert jamais au texte courant.

   Mouvement : la carte s’ouvre en douceur (hauteur animée là où le navigateur le sait : ::details-content et interpolate-size,
   déjà permis par css/theme.css ; ailleurs elle s’ouvre d’un coup), la réponse apparaît en fondu, le + tourne en −, le filet or
   se trace. Rien de tout cela sous prefers-reduced-motion. Aucun script.
   ========================================================================== */

.faq5 {
  --faq5-carte: #FBF8F2;                         /* question ouverte, encadré : la surface des cartes ia5 */
  --faq5-repos: #F5F1E9;                         /* question fermée : à peine posée sur le crème */
  --faq5-filet: #DCD4C5;
  --faq5-filet-fort: #CFC5B3;
  --faq5-pad: clamp(18px, 2.2vw, 30px);          /* marges intérieures des cartes */
  --faq5-num: 1.75rem;                           /* colonne des numéros */
  --faq5-ecart: clamp(10px, 1.1vw, 16px);        /* entre numéro, question et signe */
  --faq5-signe: 2.25rem;                         /* 36 px */
  --faq5-t-question: clamp(1.25rem, 1.15rem + 0.35vw, 1.375rem);   /* 20 (375) · 21 (768) · 22 (≥ 1024) */
}
@media (min-width: 40em) {
  .faq5 { --faq5-num: 2.25rem; }
}

/* --------------------------------------------------------------------------
   1. Titre
   -------------------------------------------------------------------------- */
.faq5 .faq5__titre { max-width: none; }

/* --------------------------------------------------------------------------
   2. Les questions
   -------------------------------------------------------------------------- */
.faq5__grille {
  display: grid;
  gap: 14px;
  margin-top: clamp(36px, 4.4vw, 64px);
}
.faq5__colonne {
  display: grid;
  gap: 14px;
  align-content: start;
}
@media (min-width: 64em) {
  .faq5__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 40px);
    align-items: start;                          /* chaque colonne garde sa hauteur : rien ne bouge en face */
  }
}

.faq5__item {
  position: relative;
  background: var(--faq5-repos);
  border: 1px solid var(--faq5-filet);
  border-radius: 4px;
  transition:
    background-color var(--d) var(--ease-sortie),
    border-color var(--d) var(--ease-sortie),
    box-shadow 480ms var(--ease-sortie);
}
/* filet or en haut de la question ouverte, comme les encadrés de la page : il se trace de gauche à droite */
.faq5__item::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  z-index: 1;
  height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--or-400), var(--or-clair) 50%, var(--or-400));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-sortie);
  pointer-events: none;
}
.faq5__item[open] {
  background: var(--faq5-carte);
  border-color: var(--faq5-filet-fort);
  box-shadow: 0 0.1rem 0.25rem rgba(6, 42, 43, 0.04), 0 1.75rem 3rem -2.25rem rgba(6, 42, 43, 0.34);
}
.faq5__item[open]::before { transform: scaleX(1); }

/* La question : numéro, intitulé, signe. Toute la carte fermée est cliquable. */
.faq5__question {
  display: grid;
  grid-template-columns: var(--faq5-num) minmax(0, 1fr) var(--faq5-signe);
  column-gap: var(--faq5-ecart);
  align-items: baseline;
  min-height: 44px;
  padding: clamp(20px, 2vw, 26px) var(--faq5-pad);
  border-radius: 3px;
  cursor: pointer;
  list-style: none;                              /* pas de triangle (Chromium, Firefox) */
  -webkit-tap-highlight-color: transparent;
}
.faq5__question::-webkit-details-marker { display: none; }   /* Safari */
.faq5__question::marker { content: ""; }

.faq5__num {
  font: italic 500 1.5rem / 1 var(--f-titre);    /* 24 px */
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
  color: var(--cuivre);
}
.faq5__intitule {
  font: 500 var(--faq5-t-question) / 1.3 var(--f-titre);
  letter-spacing: 0;
  color: var(--petrole);
  text-wrap: balance;                            /* lignes égales : jamais « mes clients ? » seul sur sa ligne */
}
/* « respectent-ils », « Peut-on », « Posez-la-nous » : jamais coupés au trait d’union (balisage seul, le texte ne change pas) */
.faq5__insecable { white-space: nowrap; }

/* le signe : un rond au trait cuivre ; + fermé, − ouvert (le trait vertical tourne et se couche sur l’horizontal) */
.faq5__signe {
  position: relative;
  align-self: center;
  width: var(--faq5-signe);
  height: var(--faq5-signe);
  border: 1px solid rgba(176, 99, 57, 0.42);
  border-radius: 50%;
  transition: border-color var(--d) var(--ease-sortie), background-color var(--d) var(--ease-sortie);
}
.faq5__signe::before,
.faq5__signe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: var(--cuivre);
  transition: transform 420ms var(--ease-sortie);
}
.faq5__signe::after { transform: rotate(90deg); }
.faq5__item[open] .faq5__signe { border-color: var(--cuivre); background: rgba(176, 99, 57, 0.07); }
.faq5__item[open] .faq5__signe::after { transform: rotate(180deg); }

/* La réponse, alignée sur l’intitulé */
.faq5__reponse {
  padding: 0 var(--faq5-pad) clamp(24px, 2.4vw, 32px) calc(var(--faq5-pad) + var(--faq5-num) + var(--faq5-ecart));
}
.faq5__reponse p {
  max-width: 36em;
  margin: 0;
  color: var(--encre);
  text-wrap: pretty;
}

/* Ouverture douce : la hauteur (navigateurs qui savent animer vers auto), puis la réponse en fondu */
.faq5__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 440ms cubic-bezier(0.25, 1, 0.5, 1), content-visibility 440ms allow-discrete;   /* sortie douce, moins brusque que --ease-sortie */
}
.faq5__item[open]::details-content { block-size: auto; }
@keyframes faq5-entree {
  from { opacity: 0; translate: 0 -6px; }
}
.faq5__item[open] .faq5__reponse { animation: faq5-entree 520ms var(--ease-sortie) 60ms both; }

/* Survol (souris seulement) */
@media (hover: hover) and (pointer: fine) {
  .faq5__item:not([open]):hover { background: var(--faq5-carte); border-color: var(--faq5-filet-fort); }
  .faq5__question:hover .faq5__signe { border-color: var(--cuivre); background: rgba(176, 99, 57, 0.07); }
}

/* Focus clavier : le contour entoure toute la carte (la question et, si elle est ouverte, sa réponse) */
.faq5__question:focus-visible {
  outline: 2px solid var(--focus, var(--petrole));
  outline-offset: -5px;
}
@supports selector(:has(*)) {
  .faq5__question:focus-visible { outline: none; }
  .faq5__item:has(> .faq5__question:focus-visible) {
    outline: 2px solid var(--focus, var(--petrole));
    outline-offset: 4px;
  }
}

/* Téléphone : cartes un peu plus serrées, réponse sur toute la largeur de la carte pour garder une ligne confortable */
@media (max-width: 39.99em) {
  .faq5__grille,
  .faq5__colonne { gap: 12px; }
  .faq5__question { padding-block: 20px; }
  .faq5__reponse { padding-left: var(--faq5-pad); }
}

/* --------------------------------------------------------------------------
   3. L’encadré « Une autre question ? »
   -------------------------------------------------------------------------- */
.faq5__encadre {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-top: clamp(48px, 5.5vw, 88px);
  padding: clamp(36px, 4.5vw, 52px) clamp(22px, 4vw, 56px);
  text-align: center;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(255, 253, 249, 0.9), rgba(255, 253, 249, 0) 70%),
    var(--faq5-carte);
  border: 1px solid transparent;                 /* visible en contraste élevé, où les ombres disparaissent */
  border-radius: 4px;
  /* double filet bronze, comme le cartouche de la charte */
  box-shadow:
    inset 0 0 0 1px rgba(156, 121, 82, 0.5),
    inset 0 0 0 6px var(--faq5-carte),
    inset 0 0 0 7px rgba(156, 121, 82, 0.24),
    0 2.5rem 4rem -3rem rgba(6, 42, 43, 0.32);
}
.faq5__picto {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFDF9, var(--creme) 75%);
  box-shadow: inset 0 0 0 1px rgba(176, 99, 57, 0.38), 0 0 0 6px rgba(176, 99, 57, 0.06);
}
.faq5__picto svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--cuivre);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq5__picto .faq5__picto-point { stroke-width: 2.6; }
.faq5__encadre-texte { display: grid; gap: 8px; }
.faq5__encadre-titre {
  font: 500 clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem) / 1.12 var(--f-titre);   /* 28 → 34 px */
  color: var(--petrole);
}
.faq5__encadre-texte p { margin: 0; color: var(--encre); text-wrap: balance; }
.faq5__groupe { display: inline-block; }         /* « par message ou par téléphone. » passe à la ligne d’un bloc (balisage seul) */

/* Les deux boutons : même disposition que la bande du haut de page (.ouverture__cta) */
.faq5__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 20px;
  margin-top: 6px;
}
.faq5__actions .btn-plaque { gap: 12px; }
@media (max-width: 599px) {
  .faq5__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .faq5__actions .btn-plaque,
  .faq5__actions .btn-cartouche { width: 100%; white-space: normal; text-align: center; }
}
/* Tablette (600 à 831 px) : les deux boutons ne tiennent pas sur une ligne ; empilés, ils prennent la largeur du plus long */
@media (min-width: 600px) and (max-width: 831px) {
  .faq5__actions { display: grid; grid-template-columns: max-content; justify-items: stretch; gap: 16px; }
}

/* Ordinateur large : sur une ligne, pictogramme, texte, boutons (86em : en dessous, le texte était trop serré entre 1200 et 1365 px) */
@media (min-width: 86em) {
  .faq5__encadre {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    column-gap: clamp(24px, 2.4vw, 36px);
    padding-inline: clamp(36px, 4vw, 56px);
    text-align: left;
  }
  .faq5__actions { margin-top: 0; justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   4. Moins d’animations, contraste élevé
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq5__item,
  .faq5__item::before,
  .faq5__item::details-content,
  .faq5__signe,
  .faq5__signe::before,
  .faq5__signe::after { transition: none; }
  .faq5__item[open] .faq5__reponse { animation: none; }
}
@media (forced-colors: active) {
  .faq5__signe::before,
  .faq5__signe::after { background: CanvasText; }
  .faq5__signe { border-color: CanvasText; }
  .faq5__item::before { display: none; }
  .faq5__picto svg { stroke: CanvasText; }
}