/* Pages du site vitrine autres que l'accueil (25/10/2026) : une page par métier et les guides, pour être trouvé sur
   Google et par les assistants (choix du 25/10/2026 : « Base + pages métiers et guides »). Même système que l'accueil
   (public/vitrine/index.html, maquette v2) : fond écume, cartes blanches à coins de 24 sans ombre, verre pour la barre
   du haut, lagon pour agir, pilules de 52 px. Aucun script : ces pages se lisent sans rien charger d'autre. */
:root {
  color-scheme: light;
  --ecume: #EEF2F1;
  --blanc: #FFFFFF;
  --encre: #1D2423;
  --encre-2: #5E6866;
  --encre-3: #3C4644;
  --filet: rgba(29, 36, 35, .1);
  --lagon: #0A7A70;
  --lagon-texte: #08675F;
  --lagon-pale: #E6F2EF;
  --profond: #0B3F3A;
  --case: #F6C24A;
  --safran: #8F5300;
  --safran-pale: #F7EACF;
  --texte: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --titre: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --chiffre: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --page: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--ecume); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--lagon-texte); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--lagon); outline-offset: 3px; border-radius: 12px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--titre); text-wrap: balance; font-weight: 700; }
/* Un mot trop long pour la largeur (texte de Safari agrandi, petit iPhone) passe à la ligne au lieu de déborder ; coupé
   avec un tiret seulement sur écran très étroit (bloc 340 px, plus bas) */
h1, h2, h3 { overflow-wrap: break-word; }
.bande { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.cadre { max-width: var(--page); margin: 0 auto; }
.verre { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58)); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: 0 8px 28px rgba(29,36,35,.12), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(29,36,35,.1); }

/* Boutons, comme dans l'application : pilules de 52 px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px; font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn.plein { background: var(--lagon); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.btn.plein:hover { background: #0B8A7E; }
.btn.second { background: rgba(29,36,35,.07); color: var(--encre); }
.btn.second:hover { background: rgba(29,36,35,.11); }
.btn.petit { height: 40px; padding: 0 16px; font-size: 15px; }

/* Barre du haut, la même que l'accueil */
.haut { position: sticky; top: max(12px, env(safe-area-inset-top, 0px)); z-index: 20; padding-top: 12px; }
.haut .cadre { height: 60px; border-radius: 999px; padding: 0 10px 0 14px; display: flex; align-items: center; gap: 8px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: 22px; letter-spacing: -.035em; }
.marque svg { width: 34px; height: 34px; flex: none; }
.haut nav { flex: 1; display: flex; justify-content: center; gap: 4px; }
.haut nav a { height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; color: var(--encre); text-decoration: none; font-size: 15px; font-weight: 500; }
.haut nav a:hover { background: rgba(29,36,35,.06); }
.haut nav a[aria-current] { background: var(--blanc); font-weight: 600; box-shadow: 0 1px 4px rgba(29,36,35,.12); }
.haut .connexion { color: var(--encre); text-decoration: none; font-size: 15px; font-weight: 500; padding: 0 12px; }

/* Entrée d'une page métier */
.entree { padding-block: 56px 32px; }
.entree .cadre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.entree .texte { display: grid; gap: 26px; }
.etiquette { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px 4px 6px; border-radius: 999px; background: var(--blanc); font-size: 14px; font-weight: 600; color: var(--encre-3); text-decoration: none; }
.etiquette b { width: 22px; height: 22px; border-radius: 7px; background: var(--lagon); color: #FFFFFF; display: grid; place-items: center; }
.etiquette b svg { width: 14px; height: 14px; }
.entree h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.03; letter-spacing: -.045em; font-weight: 800; }
.chapo { font-size: 20px; line-height: 1.5; color: var(--encre-2); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.actions .precision { font-size: 15px; color: var(--encre-2); }

/* Le visuel de l'entrée : l'icône de Leoya en grand et la carte « Avant de publier », comme une alerte de l'application */
.visuel { position: relative; min-height: 420px; display: grid; place-items: center; }
.visuel .icone-grande { width: 300px; height: 300px; filter: drop-shadow(0 30px 60px rgba(11,63,58,.22)); }
.visuel .carte { position: absolute; right: 0; bottom: 8px; width: min(320px, 100%); border-radius: 24px; padding: 16px 18px; display: grid; gap: 10px; }
.visuel .carte strong { font-size: 15px; }
.visuel .carte span { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--encre-3); }
.visuel .carte i { width: 24px; height: 24px; flex: none; border-radius: 8px; background: var(--lagon-pale); color: var(--lagon); display: grid; place-items: center; }

/* Sections */
.section { padding-block: 72px; }
.entete-section { display: grid; gap: 12px; max-width: 46rem; margin-bottom: 36px; }
.entete-section h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.04em; }
.entete-section p { font-size: 19px; color: var(--encre-2); }
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cartes article { background: var(--blanc); border-radius: 24px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.cartes article i { width: 40px; height: 40px; border-radius: 12px; background: var(--lagon-pale); color: var(--lagon); display: grid; place-items: center; margin-bottom: 6px; }
.cartes h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.cartes p { color: var(--encre-2); font-size: 16px; }
.bloc { background: var(--blanc); border-radius: 32px; padding: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.bloc h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.035em; margin-bottom: 14px; }
.bloc > div > p { color: var(--encre-2); font-size: 18px; }
.bloc > div > p + p { margin-top: 12px; }
.bloc .lien { display: inline-block; margin-top: 18px; font-weight: 600; text-decoration: none; }
.bloc .lien:hover { text-decoration: underline; }
.liste { background: var(--ecume); border-radius: 24px; overflow: hidden; }
.liste div { min-height: 58px; display: flex; align-items: center; gap: 14px; padding: 10px 18px; font-size: 16px; line-height: 1.35; }
.liste div + div { border-top: 1px solid var(--filet); margin-left: 62px; padding-left: 0; }
.liste div + div i { margin-left: -44px; }
.liste i { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--blanc); color: var(--lagon); display: grid; place-items: center; }
.liste b { font-weight: 600; }

/* Questions fréquentes : se déplient sans script */
.faq { background: var(--blanc); border-radius: 28px; overflow: hidden; }
.faq details + details { border-top: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2.2px solid var(--encre-2); border-bottom: 2.2px solid var(--encre-2); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details > div { padding: 0 24px 22px; color: var(--encre-3); font-size: 17px; max-width: 48rem; }
.faq details > div p + p { margin-top: 10px; }

/* Prix */
.prix { background: var(--blanc); border-radius: 32px; padding: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.prix h2 { font-size: 22px; letter-spacing: -.02em; color: var(--encre-2); font-weight: 600; margin-bottom: 10px; }
.prix .de { font-size: 17px; color: var(--encre-2); margin-bottom: 6px; }
.prix .montant { font-family: var(--chiffre); font-size: clamp(56px, 7vw, 84px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.prix .montant small { font-family: var(--texte); font-size: 20px; letter-spacing: 0; font-weight: 600; color: var(--encre-2); margin-left: 8px; }
.prix .montant.mot { font-family: var(--titre); font-size: clamp(34px, 4vw, 46px); letter-spacing: -.035em; }
.prix .base { margin-top: 12px; font-size: 17px; color: var(--encre-2); }
.prix .btn { margin-top: 26px; }

/* Appel final */
.appel { background: var(--profond); color: #EEF2F1; border-radius: 36px; padding: 60px 48px; display: grid; justify-items: center; text-align: center; gap: 22px; }
.appel svg { width: 96px; height: 96px; }
.appel h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.04em; }
.appel p { max-width: 34em; font-size: 19px; color: #A9C9C4; }
.appel .btn.plein { background: #FFFFFF; color: var(--lagon-texte); box-shadow: none; }
.appel .btn.plein:hover { background: #E6F2EF; }

/* Guides : une colonne de lecture */
.fil { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--encre-2); margin-bottom: 22px; }
.fil a { color: var(--encre-2); }
.fil span[aria-hidden] { opacity: .5; }
.article { max-width: 46rem; margin: 0 auto; padding-block: 48px 24px; }
.article h1 { font-size: clamp(34px, 4.8vw, 54px); line-height: 1.06; letter-spacing: -.04em; font-weight: 800; margin-bottom: 18px; }
.article .chapo { margin-bottom: 18px; }
.article .date { font-size: 14px; color: var(--encre-2); margin-bottom: 36px; }
.article .corps { background: var(--blanc); border-radius: 28px; padding: 40px; }
.corps h2 { font-size: 27px; line-height: 1.15; letter-spacing: -.03em; margin: 40px 0 14px; }
.corps h2:first-child { margin-top: 0; }
.corps h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; margin: 26px 0 10px; }
.corps p, .corps li { font-size: 17px; color: var(--encre-3); }
.corps p + p { margin-top: 12px; }
.corps ul { margin: 12px 0 0; padding-left: 22px; }
.corps li + li { margin-top: 8px; }
.corps strong { color: var(--encre); }
.encadre { margin-top: 18px; background: var(--lagon-pale); border-radius: 18px; padding: 16px 18px; font-size: 16px; color: var(--encre-3); }
.encadre.attention { background: var(--safran-pale); }
.tableau { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 16px; }
.tableau th, .tableau td { text-align: left; vertical-align: top; padding: 12px 10px; border-top: 1px solid var(--filet); }
.tableau thead th { border-top: 0; font-size: 14px; color: var(--encre-2); font-weight: 600; }
.tableau td:nth-child(2) { font-weight: 600; color: var(--encre); white-space: nowrap; }
.tableau td:nth-child(3) { color: var(--encre-2); font-size: 14px; }
.sources { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--filet); font-size: 14px; color: var(--encre-2); }
.sources p, .sources li { font-size: 14px; color: var(--encre-2); }
.voir-aussi { max-width: 46rem; margin: 0 auto; display: grid; gap: 12px; }
.voir-aussi h2 { font-size: 22px; letter-spacing: -.02em; }
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guides a { background: var(--blanc); border-radius: 24px; padding: 24px; display: grid; gap: 10px; align-content: start; color: var(--encre); text-decoration: none; }
.guides a:hover { box-shadow: 0 0 0 2px var(--lagon); }
.guides a small { font-size: 13px; font-weight: 600; color: var(--lagon-texte); text-transform: uppercase; letter-spacing: .04em; }
.guides a strong { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; font-family: var(--titre); }
.guides a span { font-size: 15px; color: var(--encre-2); }
.voir-aussi .guides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

footer { padding-block: 40px 48px; font-size: 14px; color: var(--encre-2); }
footer .cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
footer .marque { font-size: 18px; }
footer .marque svg { width: 28px; height: 28px; }
footer p { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer a { color: var(--encre-2); }

@media (max-width: 1100px) {
  .haut nav { display: none; }
  .haut .cadre { justify-content: space-between; }
  .haut .connexion { margin-left: auto; }
  .entree .cadre, .bloc, .prix { grid-template-columns: minmax(0, 1fr); }
  .visuel { min-height: 0; padding-block: 8px 0; }
  .visuel .icone-grande { display: none; }
  .visuel .carte { position: static; width: 100%; max-width: 420px; justify-self: start; }
  .cartes, .guides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .haut .connexion { font-size: 14px; padding: 0 6px; white-space: nowrap; }
  .haut .btn.petit { padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .haut .marque { gap: 8px; font-size: 20px; }
  .haut .marque svg { width: 30px; height: 30px; }
  .haut .cadre { height: 56px; padding: 0 8px 0 12px; }
  .entree { padding-block: 32px 16px; }
  .chapo { font-size: 18px; }
  .actions .btn { flex: 1 1 100%; }
  .section { padding-block: 48px; }
  .cartes, .guides, .voir-aussi .guides { grid-template-columns: minmax(0, 1fr); }
  .bloc, .prix { padding: 26px 22px; border-radius: 28px; }
  .prix .btn { width: 100%; }
  .faq summary { padding: 18px 20px; font-size: 17px; }
  .faq details > div { padding: 0 20px 20px; font-size: 16px; }
  .appel { padding: 44px 22px; border-radius: 28px; }
  .appel .btn { width: 100%; }
  .article { padding-block: 28px 16px; }
  .article .corps { padding: 24px 20px; border-radius: 24px; }
  .corps h2 { font-size: 23px; margin-top: 32px; }
  /* Le tableau des délais devient une liste de cartes sur téléphone */
  .tableau thead { display: none; }
  .tableau tr { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--filet); }
  .tableau td { padding: 0; border: 0; white-space: normal !important; }
}
@media (max-width: 380px) { .haut .marque span { display: none; } }
/* Écran très étroit (26/10/2026) : iPhone avec le texte de Safari à 150 % (environ 260 px de large) ou « Zoom de
   l'affichage » sur un petit iPhone. La barre du haut se resserre, les grands titres suivent la largeur. */
@media (max-width: 340px) {
  .bande { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .haut .cadre { gap: 2px; padding: 0 6px 0 8px; }
  .haut .marque svg { width: 28px; height: 28px; }
  .haut .connexion { font-size: 13px; padding: 0 4px; }
  .haut .btn.petit { height: 36px; padding: 0 10px; font-size: 13px; }
  .entree h1, .article h1 { font-size: 11vw; }
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .faq summary::after { transition: none; } }