/* ==========================================================================
   photodossier — feuille des PAGES DÉDIÉES (26/09/2026)
   /ephoto-permis-de-conduire · /photo-titre-de-sejour

   🔴 C'EST UNE COPIE, PAS UNE SOURCE : chaque règle ci-dessous est reprise de
   la feuille intégrée à `index.html` (charte « Onward Ticket » du 08/08), avec
   les mêmes couleurs, rayons et tailles. Si la charte change dans l'accueil,
   la reporter ici. L'accueil, lui, garde sa feuille intégrée : on ne l'a pas
   déplacée pour ne pas toucher à une page qui vend.
   📌 `?v=` à incrémenter dans les deux pages à chaque modification.
   📌 Aucune animation, aucune police externe (règles du projet).
   ========================================================================== */
:root{
  --encre:#1F2C97; --encre-doux:#5A66AC; --menthe:#CBF0E8; --turquoise:#87E9DC;
  --logo:#5FDCCB; --rose:#FBCFE3; --rose-f:#F6B9D4; --blanc:#FFFFFF;
  --anis:#D3F26A; --selection:#3E9BEA; --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--menthe);overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
body{font-family:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--turquoise);color:var(--encre);line-height:1.5;font-size:17px;
  -webkit-font-smoothing:antialiased}
svg{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:600px;margin:0 auto;padding:0 20px}

.zone-haut{background:linear-gradient(var(--menthe) 0 54%, var(--turquoise) 54%);padding:0 30px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0 20px}
.marque{display:flex;align-items:center;gap:9px}
.logo-marque{width:44px;height:44px;display:block;flex:0 0 auto}
.nom{display:none;font-size:24px;letter-spacing:-.7px;line-height:1}
.nom b{font-weight:800} .nom span{font-weight:500;opacity:.9}
.nav-liens{display:flex;align-items:center;background:#E9FAF7;border-radius:999px;padding:5px;flex:0 0 auto}
.nav-liens a{padding:10px 16px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.nav-liens a + a{position:relative}
.nav-liens a + a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:17px;background:rgba(31,44,151,.22)}
@media(hover:hover){.nav-liens a:hover{background:var(--blanc)}}
.nav-liens a:active{background:var(--blanc)}
.nav-liens a:focus-visible{outline:0;box-shadow:0 0 0 3px var(--selection)}

.hero{border-radius:var(--r);text-align:center;padding:40px 18px 40px;position:relative;z-index:1;
  background:radial-gradient(120% 78% at 50% 46%, #CBEFE7 0%, #D8F4EE 38%, #E6FAF6 68%, #F1FDFB 100%)}
.ariane{font-size:13.5px;color:var(--encre-doux);margin-bottom:14px}
.ariane a{text-decoration:underline}
h1{font-size:33px;line-height:1.08;letter-spacing:-1.1px;font-weight:800;color:var(--encre);text-wrap:balance}
.chapo{margin-top:18px;font-size:17px;line-height:1.5;color:var(--encre-doux);text-wrap:balance}
/* « e-mail » ne se coupe jamais au trait d'union (« e- / mail » mesuré à 375 px). */
.nw{white-space:nowrap}
.prix-hero{margin-top:18px;font-size:15.5px;font-weight:800;color:var(--encre)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:272px;
  margin:22px auto 0;min-height:58px;padding:0 22px;border:0;border-radius:999px;
  background:var(--rose);color:var(--encre);font-size:16.5px;font-weight:800;letter-spacing:.3px;
  font-family:inherit;cursor:pointer;text-align:center}
.btn::before{content:"";width:0;opacity:0;height:16px;flex:0 0 auto;margin-right:0;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2C97' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:width .22s ease,margin-right .22s ease,opacity .16s ease}
@media(hover:hover){
  .btn{transition:background .18s ease,box-shadow .18s ease}
  .btn:hover{background:var(--anis);box-shadow:inset 0 0 0 2px var(--encre)}
  .btn:hover::before{width:19px;margin-right:10px;opacity:1}
}
.btn:active{background:var(--rose-f)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px var(--selection)}

section{padding:52px 0}
h2{font-size:29px;line-height:1.15;letter-spacing:-.9px;font-weight:800;text-align:center;text-wrap:balance}
.aide{display:grid;gap:13px;margin-top:26px}
.carte{background:var(--blanc);border-radius:var(--r);padding:22px;box-shadow:0 6px 22px rgba(20,35,110,.07)}
.carte h3{font-size:18px;font-weight:800;letter-spacing:-.4px;margin-bottom:7px;line-height:1.25;text-wrap:balance}
.carte p{font-size:15.5px;color:var(--encre-doux);line-height:1.5}
.carte p + p{margin-top:10px}
.carte p b{color:var(--encre);font-weight:800}
.etape{width:36px;height:36px;border-radius:12px;background:var(--logo);color:var(--blanc);
  font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.carte .suite{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:15px;font-weight:800;color:var(--encre)}
.carte .suite::after{content:"";width:15px;height:15px;flex:0 0 auto;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2C97' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
@media(hover:hover){.carte .suite:hover{text-decoration:underline}}
.carte .suite:focus-visible{outline:0;box-shadow:0 0 0 3px var(--selection);border-radius:6px}
.liste{list-style:none;display:grid;gap:9px;margin-top:12px}
.liste li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:var(--encre-doux)}
.liste li svg{flex:0 0 auto;margin-top:2px}
.mention{margin-top:14px;font-size:13px;line-height:1.5;color:#5E6A85}

.faq{display:grid;gap:10px;margin-top:26px}
.faq details{background:var(--blanc);border-radius:16px;box-shadow:0 6px 22px rgba(20,35,110,.07)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  justify-content:space-between;padding:17px 18px;font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:13px;height:13px;flex:0 0 auto;opacity:.7;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2C97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:focus-visible{outline:0;box-shadow:0 0 0 3px var(--selection);border-radius:16px}
.faq details p{padding:0 18px 17px;margin-top:-4px;font-size:15.5px;line-height:1.55;color:var(--encre-doux)}
.faq details p a{color:var(--encre);font-weight:700;text-decoration:underline}

footer{background:var(--turquoise);box-shadow:0 300px 0 0 var(--turquoise);padding:6px 0 54px;text-align:center}
.pied{font-size:13px;color:#4A5695}
.pied a{text-decoration:underline}

@media(min-width:760px){
  .wrap{max-width:940px}
  .zone-haut{padding:0 44px;background:linear-gradient(var(--menthe) 0 62%, var(--turquoise) 62%)}
  .nav{max-width:1120px;margin:0 auto;padding:22px 0 26px}
  .nom{display:block}
  .marque{gap:11px}
  .logo-marque{width:50px;height:50px}
  .nav-liens a{font-size:15.5px;padding:11px 20px}
  .hero{max-width:1120px;margin:0 auto;padding:70px 40px 66px;border-radius:26px}
  h1{font-size:54px;letter-spacing:-2.2px;max-width:860px;margin:0 auto}
  .chapo{font-size:19px;max-width:640px;margin-left:auto;margin-right:auto}
  section{padding:70px 0}
  h2{font-size:37px}
  .aide{grid-template-columns:repeat(3,1fr);margin-top:34px}
  .aide--2{grid-template-columns:repeat(2,1fr)}
  .aide--1{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto}
  .faq{max-width:760px;margin:34px auto 0}
}