/* =========================================================
   Opticontact — styles des sections (nav à sous-menus,
   ressources, métiers, blocs de citation et de cas client).

   Fichier volontairement séparé de style.css : il est chargé
   APRÈS lui dans head.php. Votre feuille d'origine n'est donc
   pas modifiée, et le diff de cette mise à jour reste lisible.
   ========================================================= */

:root{
  /* Trois niveaux de risque juridique, repris dans le comparatif.
     Ils dérivent de la palette existante plutôt que d'en introduire une
     nouvelle : le cyan de la marque pour l'ouvert, un ambre et un rouge
     sobres pour les deux autres. */
  --lvl-open:#0e8f7e;   --lvl-open-bg:rgba(31,182,207,.12);   --lvl-open-bd:rgba(31,182,207,.34);
  --lvl-mid:#9a6b00;    --lvl-mid-bg:rgba(245,158,11,.13);    --lvl-mid-bd:rgba(245,158,11,.36);
  --lvl-shut:#b3322c;   --lvl-shut-bg:rgba(239,68,68,.10);    --lvl-shut-bd:rgba(239,68,68,.30);
}

/* Utilitaire : visible pour les lecteurs d'écran uniquement. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------
   Navigation : sous-menu « Le produit »
   --------------------------------------------------------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-sub-toggle{display:inline-flex;align-items:center;gap:5px;font-family:var(--font);font-size:.9rem;font-weight:500;color:var(--ink-2);background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.nav-sub-toggle:hover,.nav-item.open>.nav-sub-toggle{color:var(--indigo)}
.nav-caret{width:14px;height:14px;transition:transform .2s}
.nav-item.open>.nav-sub-toggle .nav-caret{transform:rotate(180deg)}

.nav-sub{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:264px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:20}
/* Pont invisible : évite que le sous-menu se ferme en traversant le vide. */
.nav-item.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.nav-item.has-sub:hover>.nav-sub,
.nav-item.has-sub:focus-within>.nav-sub,
.nav-item.open>.nav-sub{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-sub a{display:flex;flex-direction:column;gap:1px;padding:9px 13px;border-radius:12px;transition:background .15s}
.nav-sub a:hover{background:var(--bg-2)}
.nav-sub-label{font-size:.9rem;font-weight:600;color:var(--ink)}
.nav-sub-desc{font-size:.78rem;color:var(--muted);line-height:1.4}
.nav-links a[aria-current="page"]{color:var(--indigo);font-weight:600}

@media(max-width:960px){
  /* En menu déroulant mobile, le sous-menu devient une simple liste indentée :
     pas de survol possible, donc pas de positionnement absolu. */
  .nav-item{display:block}
  .nav-sub-toggle{width:100%;justify-content:space-between;padding:11px 12px;border-radius:12px;font-size:1rem}
  .nav-sub-toggle:hover{background:var(--bg-2)}
  .nav-sub{position:static;transform:none;min-width:0;opacity:1;pointer-events:auto;box-shadow:none;border:0;border-left:2px solid var(--line-2);border-radius:0;margin:2px 0 6px 14px;padding:0 0 0 8px;background:none;backdrop-filter:none;display:none}
  .nav-item.open>.nav-sub{display:flex;transform:none}
  .nav-item.has-sub::after{display:none}
  .nav-sub-desc{display:none}
}

/* ---------------------------------------------------------
   Cartes de renvoi vers les sections (accueil)
   --------------------------------------------------------- */
.card.hub{display:flex;flex-direction:column}
.hub-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;font-size:.88rem;font-weight:600;color:var(--indigo)}
.hub-more svg{width:15px;height:15px;transition:transform .2s}
.card.hub:hover .hub-more svg{transform:translateX(3px)}

/* Pied de section : renvoi croisé entre blog, métiers et ressources. */
.sec-foot{margin-top:46px;text-align:center;color:var(--muted);font-size:.92rem}
.sec-foot p{margin:0 0 4px}
.sec-foot a{color:var(--indigo);font-weight:600}
.sec-foot a:hover{text-decoration:underline}

/* ---------------------------------------------------------
   Bandeau brouillon (ressource non vérifiée)
   --------------------------------------------------------- */
.draft-banner{background:var(--lvl-mid-bg);border:1px solid var(--lvl-mid-bd);color:#6b4a00;border-radius:var(--r);padding:16px 20px;font-size:.9rem;line-height:1.65;margin-bottom:34px}
.draft-banner code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:rgba(255,255,255,.6);padding:1px 6px;border-radius:5px}

/* Pastille de vérification */
.verif-chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--lvl-open);background:var(--lvl-open-bg);border:1px solid var(--lvl-open-bd);padding:5px 12px;border-radius:var(--r-pill)}
.verif-chip svg{width:14px;height:14px}
.verif-line{margin-top:18px}

/* ---------------------------------------------------------
   Comparatif par pays
   --------------------------------------------------------- */
.cmp{margin-top:20px}
.cmp-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.cmp-table{width:100%;border-collapse:collapse;min-width:700px}
.cmp-table thead th{text-align:left;font-family:var(--font);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:16px 18px;border-bottom:1px solid var(--line);background:rgba(246,248,254,.6)}
.cmp-table tbody th,.cmp-table td{padding:18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem;color:var(--ink-2);line-height:1.55;text-align:left;font-weight:400}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table tbody tr:target{background:rgba(91,110,245,.05)}
.cmp-name{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);margin-bottom:8px}
.cmp-name:hover{color:var(--indigo)}
.cmp-basis,.cmp-auth{color:var(--muted);font-size:.88rem}

.lvl{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.lvl-ouvert{color:var(--lvl-open);background:var(--lvl-open-bg);border:1px solid var(--lvl-open-bd)}
.lvl-encadre{color:var(--lvl-mid);background:var(--lvl-mid-bg);border:1px solid var(--lvl-mid-bd)}
.lvl-ferme{color:var(--lvl-shut);background:var(--lvl-shut-bg);border:1px solid var(--lvl-shut-bd)}

.cmp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:16px;font-size:.84rem;color:var(--muted)}
.cmp-legend-d{margin-right:10px}

/* Détail par pays */
.pays-list{display:flex;flex-direction:column;gap:20px;margin-top:56px}
.pays{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-xs);scroll-margin-top:110px}
.pays-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pays-hd h2{font-size:1.4rem}
.pays-answer{font-size:1.02rem;font-weight:600;color:var(--ink);margin-bottom:12px}
.pays-practice{font-size:.95rem;color:var(--ink-2);line-height:1.75;margin-bottom:22px}
.pays-meta{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-top:22px;border-top:1px solid var(--line)}
.pays-meta h3{font-family:var(--font);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.pays-meta ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.pays-meta li,.pays-meta p{font-size:.89rem;color:var(--muted);line-height:1.6}
.pays-more{margin-top:20px}
.pays-more a{display:inline-flex;align-items:center;gap:7px;color:var(--indigo);font-weight:600;font-size:.92rem}
.pays-more svg{width:15px;height:15px}

/* Check-list de relecture : visible uniquement tant que la page est en brouillon. */
.checks{margin-top:20px;background:var(--lvl-mid-bg);border:1px dashed var(--lvl-mid-bd);border-radius:var(--r);padding:12px 16px}
.checks summary{cursor:pointer;font-size:.86rem;font-weight:700;color:#6b4a00}
.checks ul{margin:12px 0 4px 18px;display:flex;flex-direction:column;gap:6px}
.checks li{font-size:.86rem;color:#6b4a00;line-height:1.55}

.common{margin-top:52px;background:var(--surface);background-image:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px}
.common h2{font-size:1.35rem;margin-bottom:20px}

@media(max-width:720px){
  .pays-meta{grid-template-columns:1fr;gap:20px}
  .pays{padding:24px 20px}
}

/* ---------------------------------------------------------
   Bloc « citer cette page »
   --------------------------------------------------------- */
.cite{margin-top:52px;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;background:var(--surface)}
.cite h2{font-size:1.2rem;margin-bottom:8px}
.cite-help{font-size:.9rem;color:var(--muted);line-height:1.65;margin-bottom:18px}
.cite-box{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cite-box code{flex:1 1 320px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.6;color:var(--ink-2);background:#fbfcff;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;word-break:break-word}
.cite-copy{flex:0 0 auto}
.cite-copy.done{color:var(--lvl-open);border-color:var(--lvl-open-bd)}

/* ---------------------------------------------------------
   Bloc « cas client » des pages métier
   --------------------------------------------------------- */
.case{margin-top:52px;background:var(--surface);border:1px solid rgba(91,110,245,.3);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px}
.case-hd{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.case-ico{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:var(--grad-soft);color:var(--indigo)}
.case-ico svg{width:22px;height:22px}
.case-hd h2{font-size:1.3rem;margin-bottom:3px}
.case-who{font-size:.9rem;color:var(--muted)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.case-kpi{padding:18px;background:#fbfcff;border:1px solid var(--line);border-radius:var(--r)}
.case-kpi-l{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.case-kpi-v{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.case-before{font-size:1.05rem;color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
.case-arrow{color:var(--faint);font-size:.95rem}
.case-after{font-size:1.6rem}
.case-kpi-n{font-size:.78rem;color:var(--muted);margin-top:9px;line-height:1.5}
.case-caveat{margin-top:22px;font-size:.92rem;color:var(--ink-2);line-height:1.7;padding:14px 18px;background:var(--bg-2);border-radius:var(--r)}
.case-caveat strong{color:var(--ink)}
.case-quote{margin-top:24px;padding-left:18px;border-left:3px solid var(--indigo)}
.case-quote blockquote{font-size:1.02rem;color:var(--ink);line-height:1.7;font-style:italic}
.case-quote figcaption{margin-top:9px;font-size:.85rem;color:var(--muted);font-weight:600}
.case-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--faint);line-height:1.6}

@media(max-width:720px){.case{padding:26px 20px}}

/* Pastille « avec cas client » sur les cartes de l'index métiers. */
.bcard-flag{display:inline-flex;align-items:center;gap:6px;color:var(--lvl-open);text-transform:none;letter-spacing:0}
.bcard-flag svg{width:13px;height:13px}

@media(prefers-reduced-motion:reduce){
  .nav-sub,.nav-caret,.hub-more svg{transition:none!important}
}

/* =========================================================
   Pages métier : mise en page propre

   Une page métier ne vend pas un raisonnement, elle vend une
   preuve. Elle ne doit donc pas se lire comme un article de
   blog. Trois écarts assumés par rapport au gabarit éditorial :
   deux colonnes avec un rail qui garde les chiffres visibles,
   un badge de preuve dès le titre, et l'exemple d'email traité
   comme une pièce à conviction plutôt qu'une citation en retrait.

   L'accent passe du bleu indigo au violet de la palette : assez
   pour qu'on sente qu'on a changé de section, pas assez pour
   qu'on quitte la marque.
   ========================================================= */

.article.metier .article-wrap{max-width:1120px}

/* Badge de preuve, au-dessus du titre ---------------------- */
.proof-badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:6px 8px 6px 14px;border-radius:var(--r-pill);background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.28);text-decoration:none;transition:border-color .2s,background .2s}
.proof-badge:hover{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.45)}
.proof-badge svg{width:15px;height:15px;color:var(--violet)}
.proof-badge-l{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--violet)}
/* La valeur chiffrée est l'information, pas la décoration : on la
   détache du libellé au lieu de tout mettre au même niveau. */
.proof-badge-v{font-family:var(--display);font-size:.8rem;font-weight:700;color:#fff;background:var(--violet);padding:4px 11px;border-radius:var(--r-pill)}

/* Grille deux colonnes ------------------------------------- */
.mlayout{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:46px;align-items:start;margin-top:8px}
.mmain{min-width:0}

/* La colonne de droite commence en haut de page, au niveau du titre : les
   chiffres sont donc lisibles sans défiler, ce qui est tout l'objet d'une
   page métier. Le titre, lui, vit dans une colonne plus étroite et se cale
   sur une taille légèrement réduite. */
.article.metier .article-head{margin-bottom:26px}
.article.metier .article-title{font-size:clamp(1.6rem,3.2vw,2.25rem)}
.article.metier .article-excerpt{font-size:1.02rem}

/* Illustration : elle ne porte aucune information sur ce type de page, donc
   elle passe d'un bandeau 16/9 pleine largeur à une vignette qui coiffe le
   rail. Elle garde ses deux vrais rôles, vignette dans l'index des métiers et
   image de partage social, sans repousser les chiffres sous la ligne de
   flottaison. */
.rail-cover{margin-bottom:14px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.rail-cover img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

.rail{display:flex;flex-direction:column}
/* Le collant porte sur l'enveloppe des cartes, pas sur la colonne : sinon
   l'illustration resterait figée à l'écran pendant toute la lecture. */
.rail-sticky{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px}
.rail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-xs)}
.rail-hd{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.rail-hd svg{width:14px;height:14px;color:var(--violet)}
.rail-proof{border-color:rgba(139,92,246,.32);background-image:linear-gradient(180deg,rgba(139,92,246,.06),transparent 60%)}
.rail-kpis{list-style:none;display:flex;flex-direction:column;gap:14px}
.rail-kpis li{display:flex;align-items:baseline;gap:11px}
.rail-v{flex:0 0 auto;font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;color:var(--violet);min-width:64px}
.rail-l{font-size:.83rem;color:var(--muted);line-height:1.4}
.rail-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:.82rem;font-weight:600;color:var(--violet)}
.rail-more svg{width:14px;height:14px}
.rail-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.rail-list li{position:relative;padding-left:16px;font-size:.85rem;color:var(--ink-2);line-height:1.55}
.rail-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--violet);opacity:.45}
.rail-p{font-size:.85rem;color:var(--ink-2);line-height:1.55;margin-bottom:12px}
.rail-p:last-child{margin-bottom:0}
.rail-p strong{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.rail-cta{background:var(--surface);background-image:var(--grad-soft);border-color:var(--line-2);text-align:center}
.rail-cta p{font-size:.86rem;color:var(--ink-2);line-height:1.6;margin-bottom:16px}
.rail-cta .btn{width:100%}

/* Exemple d'email ------------------------------------------ */
.mail-demo{margin-top:44px}
.mail-demo h2{font-size:1.45rem;letter-spacing:-.015em;margin-bottom:8px}
.mail-demo-lede{font-size:.92rem;color:var(--muted);line-height:1.65;margin-bottom:24px}
.mail-demo .mail{max-width:640px}
.mail-demo .compare-legend{justify-content:flex-start;margin-top:16px}
/* Les annotations commentent l'email dans l'ordre de lecture :
   la numérotation encode une séquence réelle, elle n'est pas décorative. */
.mail-notes{list-style:none;counter-reset:mn;margin-top:24px;display:flex;flex-direction:column;gap:13px;max-width:640px}
.mail-notes li{counter-increment:mn;position:relative;padding-left:38px;font-size:.92rem;color:var(--ink-2);line-height:1.65}
.mail-notes li::before{content:counter(mn);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:8px;background:rgba(139,92,246,.12);color:var(--violet);font-family:var(--display);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}

/* Accents violets propres à la section --------------------- */
.article.metier .article-body a{color:var(--violet)}
.article.metier .case{border-color:rgba(139,92,246,.34)}
.article.metier .case-ico{color:var(--violet)}
.article.metier .case-after{background:linear-gradient(115deg,#8b5cf6,#5b6ef5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.article.metier .case-quote{border-left-color:var(--violet)}
.article.metier .bcard:hover .bcard-title{color:var(--violet)}

@media(max-width:1020px){
  .mlayout{grid-template-columns:1fr;gap:34px}
  .rail-sticky{position:static;flex-direction:row;flex-wrap:wrap}
  .rail-card{flex:1 1 260px}
  /* Sur une colonne, le rail passe en bas de page : y afficher l'illustration
     n'aurait plus aucun sens, et chaque pixel avant la première phrase utile
     coûte cher sur un écran étroit. */
  .rail-cover{display:none}
  /* Sur une colonne, le rail passe SOUS le bloc cas : les deux cartes qui
     le répètent deviennent redondantes, on ne garde que l'information
     qu'on ne trouve nulle part ailleurs. */
  .rail-proof,.rail-cta{display:none}
}
@media(max-width:560px){
  .proof-badge{flex-wrap:wrap}
  .mail-demo h2{font-size:1.25rem}
}

/* =========================================================
   Signature d'auteur et page d'entité
   ========================================================= */

.author{margin-top:52px;display:flex;flex-direction:column;gap:14px;padding:26px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--indigo);border-radius:var(--r)}
.article.metier .author{border-left-color:var(--violet)}
.author-id{display:flex;align-items:center;gap:14px}
.author-mark{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-family:var(--display);font-weight:800;font-size:1.1rem}
.author-name{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1rem;line-height:1.3}
.author-role{font-size:.83rem;color:var(--muted)}
.author-bio{font-size:.92rem;color:var(--ink-2);line-height:1.7}
.author-bio a{color:var(--indigo);font-weight:600}
.article.metier .author-bio a{color:var(--violet)}
/* Les liens vers les registres sont en nofollow et discrets : ils servent la
   vérification par un lecteur ou un modèle, pas le référencement. */
.author-links{font-size:.8rem;color:var(--faint)}
.author-links a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.author-links a:hover{color:var(--ink-2)}

.proofs{margin-top:46px;padding:26px;background:var(--surface);background-image:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r-lg)}
.proofs h2{font-size:1.2rem;margin-bottom:16px}
.proofs-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.proofs-list a{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--indigo)}
.proofs-list svg{width:15px;height:15px;transition:transform .2s}
.proofs-list a:hover svg{transform:translateX(3px)}