/* AUNL Informatique : maquette v3. Chargée après styles.css.
   Parti pris : le devis tient la place de l'écran du logo, entouré des deux arcs à grande échelle.
   Formes : documents, photos et étiquettes à angles vifs ; 4 px sur les seuls contrôles. Les vraies courbes sont celles du logo. */
:root {
  --rayon: 4px;
  --b: max(var(--gouttiere), calc((100vw - 1280px) / 2 + var(--gouttiere)));
  --axe: calc(50vw - 20px);   /* axe vertical unique de la page, desktop */
  --surface-fond: #E6E5E1;
  --filet-sur-fond: #C8C7C1;
  --filet: #E4E3DF;
  --texte-secondaire: #5A5955;
  --texte-inverse-secondaire: #C8C6C1;
  --surface-inverse-2: #24231F;
}
body { background: var(--surface-fond); }
:focus-visible { border-radius: 0; }
.doc, .ecart, .etiquette, .feuille, figure { border-radius: 0; }
.doc { border: 0; }
figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
section, #devis { scroll-margin-top: 92px; }

/* En-tête */
.entete { background: var(--surface-fond); backdrop-filter: none; border-bottom: 0; }
.entete .wrap { height: 76px; }
.v-entete-droite { display: flex; align-items: center; }
.v-logo { display: block; }
.v-logo img { display: block; width: auto; height: 64px; }
.v-cta-entete { display: inline-flex; min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; background: var(--texte-principal); color: var(--texte-inverse); }
.v-cta-entete:hover { background: var(--action-fond); color: var(--action-texte); }
.entete :focus-visible { outline-color: var(--focus); }

/* Ouverture : hero sur encre, devis à cheval sur le gris */
.ouverture { position: relative; display: grid; grid-template-columns: var(--gouttiere) minmax(0, 1fr) var(--gouttiere); overflow: hidden; }
.ouverture-noir { grid-column: 1 / -1; grid-row: 1 / 3; background: var(--surface-inverse); }
.hero-v3, .devis-v3 { display: contents; }
.hero-v3 h1 { grid-column: 2; grid-row: 1; z-index: 1; margin: 28px 0 14px; color: var(--texte-inverse); font-weight: 500; text-wrap: wrap; }
.hero-v3 .saut { display: block; }
.hero-suite { grid-column: 2; grid-row: 2; z-index: 1; padding-bottom: 104px; color: var(--texte-inverse); }
.hero-suite .chapo { color: var(--texte-inverse-secondaire); }
.etape { margin-top: 22px; }
.etape .question { font-size: 21px; font-weight: 500; margin-bottom: 12px; color: var(--texte-inverse); }
.hero-note { margin-top: 12px; font-size: 15px; color: var(--texte-inverse-secondaire); }

/* Choix : une seule barre, découpée en cases */
.etape .choix { gap: 1px; background: var(--surface-inverse); border-radius: var(--rayon); overflow: hidden; }
.etape .opt { border: 0; border-radius: 0; padding: 0 6px; white-space: nowrap; background: var(--action-fond); color: var(--action-texte); font-weight: 600; min-height: 60px; }
.etape .opt:hover, .etape .opt[aria-pressed="true"] { background: var(--texte-inverse); color: var(--texte-principal); }
.etape :focus-visible { outline-color: var(--action-texte); outline-offset: -5px; }

/* Le devis et ses deux arcs */
.orbite { grid-column: 2; grid-row: 3; position: relative; z-index: 2; container-type: inline-size; margin-top: -40px; margin-bottom: 64px; }
.orbite .doc { position: relative; z-index: 2; margin: 0; max-width: none; }
.arc { position: absolute; display: block; height: auto; max-width: none; pointer-events: none; }
.arc-haut { z-index: 1; width: 128cqw; left: -14cqw; top: -15cqw; }
.arc-bas { z-index: 1; width: 128cqw; left: -7cqw; bottom: -17cqw; }
.doc-origine { display: block; margin-top: 3px; text-align: left !important; }
.orbite .doc .ecart-recond { background: var(--action-fond); color: var(--action-texte); margin-top: 12px; }
.orbite .doc .ecart-recond strong { color: inherit; }
.orbite .doc tr.total td { font-size: 20px; font-weight: 600; }
.devis-texte { grid-column: 2; grid-row: 4; z-index: 3; padding: 28px 0 var(--section-y); }
.devis-texte .intro { color: var(--texte-principal); }
.intro { max-width: 50ch; }

/* Étapes : le temps d'abord */
.etapes-v3 { display: grid; gap: 32px; padding-bottom: var(--section-y); }
.etapes-photos { position: relative; }
.photo-grande { height: 300px; margin-right: 40px; }
.photo-grande img, .qui-portrait img { filter: grayscale(1) contrast(1.06); }
.etiquette-photo { position: absolute; left: auto; right: 40px; bottom: -14px; max-width: none; line-height: 1.3; white-space: nowrap; }
.etapes-texte { padding: 0 var(--gouttiere); }
.temps { display: grid; gap: 32px; margin-top: 28px; }
.temps .quand { font: 500 clamp(28px, 7vw, 40px)/1.1 var(--font-titre); letter-spacing: -.02em; }
.temps h3 { margin-top: 8px; font-weight: 600; }
.temps li > p:last-child { margin-top: 4px; max-width: 46ch; color: var(--texte-secondaire); }

/* Reprise : l'attestation déborde sur le bloc suivant */
.reprise-v3 { display: grid; gap: 28px; padding: var(--section-y) var(--gouttiere) 0; }
.reprise-v3 .intro { color: var(--texte-principal); }
.reprise-action { margin-top: 24px; }
.btn-second { background: transparent; border-color: var(--texte-principal); }
.btn-second:hover { background: var(--texte-principal); color: var(--texte-inverse); }
.reprise-v3 .doc { position: relative; z-index: 2; margin: 0 0 -56px; }

/* Qui vous répond */
.qui-v3 { display: grid; background: var(--surface-inverse); color: var(--texte-inverse); }
.qui-portrait { height: 420px; }
.qui-portrait img { object-position: 50% 15%; }
.qui-texte { padding: 36px var(--gouttiere) var(--section-y); }
.qui-texte .citation { margin-top: 18px; font: 500 21px/1.42 var(--font-titre); letter-spacing: -.01em; }
.qui-texte .signature, .qui-texte .limite, .qui-texte .adresse { color: var(--texte-inverse-secondaire); }
.qui-texte a { color: var(--texte-inverse); }
.qui-v3 :focus-visible { outline-color: var(--texte-inverse); }
.garanties { display: grid; gap: 2px 20px; margin: 32px 0 0; }
.garanties dt { color: var(--action-fond); font-weight: 600; }
.garanties dd { margin: 0 0 12px; }

/* Avis */
.avis-v3 { display: grid; gap: 40px; padding: var(--section-y) var(--gouttiere) 0; }
.avis-v3 blockquote { margin: 0; font-family: var(--font-titre); font-weight: 500; letter-spacing: -.015em; }
.avis-v3 blockquote { font-size: clamp(22px, 2.6vw, 26px); line-height: 1.28; }
.avis-v3 figcaption { margin-top: 10px; font-size: 15px; color: var(--texte-secondaire); }

/* Questions */
.faq-v3 { padding: var(--section-y) var(--gouttiere); }
.faq-v3 .faq { border-top-color: var(--filet-sur-fond); }
.faq-v3 .faq details { border-bottom-color: var(--filet-sur-fond); }
.faq-v3 details p { color: var(--texte-principal); }
.faq-v3 summary { font-weight: 500; }

/* Bloc final */
.final-v3 { position: relative; overflow: hidden; padding: var(--section-y) var(--gouttiere); background: var(--surface-inverse); color: var(--texte-inverse); }
.final-v3 h2 { position: relative; z-index: 1; font-weight: 500; }
.final-v3 .etape, .final-v3 .alt-tel { position: relative; z-index: 1; }
.arc-final { display: none; }
.alt-tel { margin-top: 20px; color: var(--texte-inverse-secondaire); }
.alt-tel a { display: inline-block; color: var(--texte-inverse); font-weight: 500; }
.final-v3 :focus-visible { outline-color: var(--texte-inverse); }

/* Pied de page */
.pied { background: var(--surface-fond); color: var(--texte-secondaire); border-top: 0; }
.pied a { color: var(--texte-principal); }
.pied :focus-visible { outline-color: var(--focus); }
.pied-bas { border-top-color: var(--filet-sur-fond); }
.v-logo-pied img { display: block; width: 104px; height: auto; }
.v-pied-legal { padding-bottom: 36px; }

/* Barre mobile */
.barre { background: var(--surface-inverse); border-top-color: var(--filet-inverse); }
.barre :focus-visible { outline-color: var(--texte-inverse); }

/* Fenêtre du formulaire */
.qui img { border-radius: 0; }
@media (min-width: 768px) {
  .feuille.ouverte { box-shadow: 0 0 0 100vmax rgba(16, 15, 13, .55); }
  .feuille { max-height: 94vh; }
  .feuille .opt { min-height: 42px; }
  .feuille .choix-liste, .feuille .choix { gap: 6px; }
  .feuille .groupe + .groupe { margin-top: 12px; }
  .feuille .groupe legend { margin-bottom: 6px; }
  .feuille .rappel { margin-bottom: 8px; }
  .feuille-corps { padding: 12px 20px 16px; }
  .feuille .pas-actions { margin: 14px -20px -16px; bottom: -16px; padding: 10px 20px 12px; }
  .feuille .champ + .champ { margin-top: 8px; }
  .feuille .champ input { min-height: 44px; padding: 9px 12px; }
  .feuille .champ textarea { min-height: 60px; }
}

/* Une seule entrée orchestrée : les arcs se déploient, le devis sort, l'étiquette se pose */
@keyframes arc-droite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes arc-gauche { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.js .arc-haut { animation: arc-droite 1000ms var(--ease-sortie) both; }
.js .arc-bas { animation: arc-gauche 1000ms var(--ease-sortie) 200ms both; }
@media (prefers-reduced-motion: reduce) { .js .arc-haut, .js .arc-bas { animation: none; } }

/* Petits écrans */
@media (max-width: 360px) {
  .entete .wrap { height: 60px; }
  .v-logo img { height: 50px; }
  .hero-v3 h1 { font-size: 28px; margin: 16px 0 8px; }
  .hero-suite .chapo { font-size: 15px; line-height: 1.5; }
  .etape { margin-top: 12px; }
  .etape .question { font-size: 19px; margin-bottom: 8px; }
  .etape .opt { min-height: 50px; }
  .hero-note { font-size: 14px; }
  .etiquette-photo { white-space: normal; }
}
@media (min-width: 768px) {
  .etape .choix { grid-template-columns: repeat(4, 1fr); gap: 1px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .feuille { display: flex; }
  .entete .wrap { height: 100px; }
  .v-logo img { height: 84px; }
  .v-cta-entete { padding: 0 18px; font-size: 15px; }
  section, #devis { scroll-margin-top: 116px; }

  .ouverture { grid-template-columns: var(--b) calc(var(--axe) - var(--b) - 64px) 64px minmax(0, 1fr) 82px var(--b); grid-template-rows: auto auto auto; }
  .ouverture-noir { grid-row: 1 / 3; }
  .hero-v3 h1 { grid-column: 2 / 6; grid-row: 1; margin: 44px 0 8px; font-size: min(5vw, 66px); line-height: 1.04; letter-spacing: -.028em; }
  .hero-suite { grid-column: 2; grid-row: 2; padding: 12px 0 56px; }
  .orbite { grid-column: 4; grid-row: 2 / 4; margin: 96px 0 150px; }
  .orbite .doc { padding: 22px 28px 20px; }
  .orbite .doc td { padding-top: 9px; padding-bottom: 9px; }
  .orbite .doc td + td { padding-left: 28px; }
  .orbite .doc .ht { display: none; }
  .orbite .doc .ecart-recond { display: block !important; }
  .arc-haut { left: -9cqw; }
  .devis-texte { grid-column: 2; grid-row: 3; padding: 48px 0 96px; }
  .devis-texte h2 { max-width: 13em; }

  .etapes-v3 { grid-template-columns: calc(var(--axe) - 72px) minmax(0, 1fr); gap: 72px; align-items: start; padding-right: var(--b); padding-bottom: 112px; }
  .photo-grande { height: 620px; margin-right: 0; }
  .etiquette-photo { right: 24px; font-size: 15px; padding: 10px 13px; }
  .etapes-texte { padding: 24px 0 0; }
  .temps { gap: 44px; margin-top: 44px; }

  .reprise-v3 { grid-template-columns: calc(var(--axe) - var(--b) - 64px) minmax(0, 531px); gap: 64px; padding: 64px var(--b) 0; align-items: start; }
  .reprise-texte { padding-bottom: 88px; }
  .reprise-v3 .doc { align-self: end; margin: 0 0 -96px; padding: 26px 28px; }

  .qui-v3 { grid-template-columns: var(--axe) minmax(0, 1fr); }
  .qui-texte { grid-column: 1; grid-row: 1; padding: 96px 64px 96px var(--b); }
  .qui-portrait { grid-column: 2; grid-row: 1; height: auto; min-height: 640px; }
  .qui-texte .citation { font-size: 25px; line-height: 1.34; max-width: 30em; }
  .garanties { grid-template-columns: 150px 1fr; }
  .garanties dd { margin-bottom: 6px; }

  .avis-v3 { grid-template-columns: calc(var(--axe) - var(--b) - 64px) minmax(0, 1fr); gap: 64px; padding: 112px var(--b) 0; }

  .faq-v3 { display: grid; grid-template-columns: calc(var(--axe) - var(--b) - 64px) minmax(0, 1fr); gap: 64px; align-items: start; padding: 112px var(--b); }
  .faq-v3 .faq { margin-top: 0; }

  .final-v3 { padding: 112px var(--b); }
  .final-v3 h2 { max-width: 12em; font-size: min(5vw, 66px); line-height: 1.04; letter-spacing: -.028em; }
  .final-v3 .etape { margin-top: 40px; max-width: 524px; }
  .arc-final { display: block; width: 720px; right: -220px; top: 50%; transform: translateY(-50%); }
  .pied { padding-bottom: 36px; }
}

/* Pages légales */
.v-legal { padding: 32px var(--gouttiere) var(--section-y); }
.v-legal-feuille { max-width: 780px; margin: 0 auto; padding: 24px 20px 32px; background: var(--surface-page); }
.v-legal h1 { font-size: var(--fs-h2); font-weight: 500; }
.v-legal .maj { margin-top: 8px; font-size: 14px; color: var(--texte-secondaire); }
.v-legal h2 { margin-top: 32px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.v-legal p, .v-legal ul { margin-top: 10px; }
.v-legal ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.v-legal dl { display: grid; gap: 2px 20px; margin: 12px 0 0; }
.v-legal dt { color: var(--texte-secondaire); font-size: 15px; }
.v-legal dd { margin: 0 0 8px; font-weight: 500; }
.v-legal a { text-underline-offset: 3px; }
.v-legal-retour { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; font-weight: 500; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .v-legal-feuille { padding: 40px 48px 48px; }
  .v-legal dl { grid-template-columns: 220px 1fr; }
  .v-legal dd { margin-bottom: 6px; }
}
@media (min-width: 1024px) { .v-legal { padding-left: var(--b); padding-right: var(--b); } }

/* ===== Formulaire v3 : clair, guidé, sans pression =====
   En-tête noir, progression visible, choix lisibles d'un coup d'œil. L'orange ne marque que l'action et l'avancement. */
.feuille { background: var(--surface-page); }
.feuille-tete { background: var(--surface-inverse); border-bottom: 0; color: var(--texte-inverse); }
#feuille-titre { color: var(--texte-inverse); font-weight: 500; }
.feuille-tete .icone { color: var(--texte-inverse); border-radius: var(--rayon); }
.feuille-tete .icone svg { stroke: currentColor; }
.feuille-tete .icone:hover { background: rgba(255, 255, 255, .14); }
.feuille-tete :focus-visible { outline-color: var(--texte-inverse); outline-offset: -3px; }

.feuille-progres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 5px; background: var(--surface-inverse); }
.feuille-progres i { background: #4A4944; transition: background-color var(--d-layout); }
.feuille[data-pas="1"] .feuille-progres i:nth-child(1),
.feuille[data-pas="2"] .feuille-progres i:nth-child(-n+2),
.feuille[data-pas="3"] .feuille-progres i,
.feuille[data-pas="ok"] .feuille-progres i { background: var(--action-fond); }

.feuille .question { font-size: 24px; font-weight: 500; margin-bottom: 16px; }
.feuille .form-qui { margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--texte-secondaire); }
.feuille .groupe legend { font: 500 18px/1.25 var(--font-titre); letter-spacing: -.01em; }
.feuille .rappel { font-size: 14px; }
.feuille .rappel button { margin-left: 6px; }

/* Choix : une case qui se coche, plus de bloc noir */
.feuille .opt { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--surface-page); color: var(--texte-principal); border: 1px solid var(--bordure-controle); }
.feuille .opt:hover { background: #F5F4F1; border-color: var(--texte-principal); }
.feuille .opt[aria-pressed="true"] { background: #FFF1E3; border-color: var(--texte-principal); box-shadow: inset 0 0 0 1px var(--texte-principal); color: var(--texte-principal); font-weight: 600; }
.feuille .choix-liste .opt { justify-content: flex-start; padding: 8px 14px; line-height: 1.25; }
.feuille .choix-liste .opt::before { content: ""; flex: none; width: 18px; height: 18px; border: 1px solid var(--bordure-controle); background: var(--surface-page) center / 14px no-repeat; }
.feuille .choix-liste .opt[aria-pressed="true"]::before { border-color: var(--action-fond); background-color: var(--action-fond); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23100F0D' stroke-width='2'/%3E%3C/svg%3E"); }

/* Champs : fond léger, le champ actif ressort */
.feuille .champ label { font-size: 15px; }
.feuille .champ input, .feuille .champ textarea { background: #F7F6F3; }
.feuille .champ input:focus, .feuille .champ textarea:focus { background: var(--surface-page); border-color: var(--texte-principal); box-shadow: inset 0 0 0 1px var(--texte-principal); outline: none; }
.feuille .champ input[aria-invalid="true"] { background: var(--surface-page); }

.feuille .pas-actions { border-top-color: var(--filet); }
.feuille .pas-actions .btn { min-height: 56px; font-size: 17px; }

/* Confirmation */
.feuille .succes { padding-top: 12px; }
.feuille .succes::before { content: ""; display: block; width: 44px; height: 44px; margin-bottom: 16px; background: var(--action-fond) center / 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23100F0D' stroke-width='1.6'/%3E%3C/svg%3E"); }

@media (min-width: 768px) {
  .feuille { width: 600px; }
  .feuille .opt { min-height: 44px; }
  .feuille [data-groupe="type"] { grid-template-columns: repeat(3, 1fr); }
  .feuille [data-groupe="type"] .opt { min-height: 58px; padding: 8px 12px; gap: 10px; }
  .feuille [data-groupe="reprise"] { grid-template-columns: repeat(2, 1fr); }
  .feuille [data-choix-postes="form"] .opt { min-height: 60px; }
  .feuille-corps { padding: 16px 24px 20px; }
  .feuille .pas-actions { margin: 16px -24px -20px; bottom: -20px; padding: 12px 24px 14px; }
}
@media (prefers-reduced-motion: reduce) { .feuille-progres i { transition: none; } }

/* Étape 3 complète sans défilement sur un écran de portable */
@media (min-width: 768px) {
  .feuille .champ + .champ { margin-top: 6px; }
  .feuille .champ { gap: 3px; }
  .feuille .champ input { min-height: 42px; }
  .feuille .champ textarea { min-height: 44px; height: 44px; }
  .feuille .rappel { margin-bottom: 4px; }
}
/* En-tête du devis empilé sur mobile : les deux blocs ne tiennent pas côte à côte */
@media (max-width: 480px) {
  .orbite .doc-tete { flex-direction: column; gap: 6px; }
  .orbite .doc-tete > span { text-align: left; }
}