/* Simulateur SERP Google. La carte d'aperçu reprend la police et les couleurs d'un résultat Google clair ;
   tout le reste suit la charte sombre de la plateforme. */
.serp-h1{font-size:clamp(2.2rem,5.2vw,4.6rem);line-height:.98}
.serp-outil{display:grid;gap:clamp(1.5rem,3vw,2.5rem);padding:clamp(1.25rem,2.5vw,2rem);background:var(--nuit-2);border:1px solid var(--filet-nuit);margin-bottom:clamp(3rem,6vw,5rem)}
@media (min-width:64rem){.serp-outil{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.serp-editeur,.serp-colonne{min-width:0;display:flex;flex-direction:column;gap:1.1rem}
.serp-champ{display:flex;flex-direction:column;gap:.45rem}
.serp-champ label{font-weight:600;color:var(--texte-nuit)}
.serp-champ-tete{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.serp-boutons-champ{display:flex;gap:.4rem}
.serp-facultatif{font:400 .75rem var(--mono);color:#A9B6B4;margin-left:.4rem}
.page-serp input[type=text],.page-serp textarea{width:100%;box-sizing:border-box;background:var(--fond-3);color:var(--texte-nuit);border:1px solid #5A6E71;border-radius:var(--rayon);padding:.7rem .8rem;font:400 1rem/1.45 var(--sans)}
.page-serp textarea{resize:vertical}
.page-serp input[type=text]::placeholder,.page-serp textarea::placeholder{color:#8E9C9A}
.page-serp input:focus-visible,.page-serp textarea:focus-visible,.page-serp button:focus-visible,.page-serp summary:focus-visible,.page-serp a:focus-visible{outline:3px solid var(--menthe);outline-offset:2px}
.page-serp input[aria-invalid=true]{border-color:#F28B7D}
.serp-mini,.serp-secondaire,.serp-mode{font:500 .85rem var(--sans);color:var(--texte-nuit);background:transparent;border:1px solid #5A6E71;border-radius:var(--rayon);padding:.45rem .8rem;min-height:2.5rem;cursor:pointer}
.serp-mini:hover,.serp-secondaire:hover,.serp-mode:hover{border-color:var(--menthe)}
.serp-mode[aria-pressed=true]{background:var(--menthe);color:var(--nuit);border-color:var(--menthe)}
.serp-modes{display:flex;gap:.4rem}
.serp-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.serp-code{display:flex;flex-direction:column;gap:.4rem}
.page-serp #serp-html{font:400 .85rem/1.5 var(--mono);color:var(--menthe)}
.serp-annonce{margin:0;min-height:1.4em;color:var(--menthe);font-size:.92rem}

/* Jauges : la barre pleine vaut 125 % de la place disponible ; le trait marque la limite (100 %). */
.serp-jauge{position:relative;height:.5rem;background:var(--fond-3);border-radius:999px;overflow:hidden}
.serp-jauge-barre{position:absolute;left:0;top:0;bottom:0;border-radius:999px;transition:width .12s linear}
.serp-jauge-limite{position:absolute;left:80%;top:0;bottom:0;width:2px;background:#E6EBEA}
.serp-etat{margin:0;font-weight:600}
.serp-mesure{margin:0;font:400 .82rem/1.5 var(--mono);color:#B4C0BE}
.serp-c-vert{color:#7FD4A1}.serp-jauge-barre.serp-c-vert{background:#7FD4A1}
.serp-c-orange{color:#F2B766}.serp-jauge-barre.serp-c-orange{background:#F2B766}
.serp-c-rouge{color:#FF9C8F}.serp-jauge-barre.serp-c-rouge{background:#FF9C8F}
.serp-c-neutre{color:#B4C0BE}.serp-jauge-barre.serp-c-neutre{background:#8A9896}
.serp-etat.serp-c-vert::before{content:"✓ "}.serp-etat.serp-c-orange::before{content:"! "}.serp-etat.serp-c-rouge::before{content:"× "}.serp-etat.serp-c-neutre::before{content:"• "}
@media (prefers-reduced-motion:reduce){.serp-jauge-barre{transition:none}}

/* Aperçu : la carte garde sa largeur simulée et se réduit à l'écran si la colonne est plus étroite. */
.serp-apercu-tete{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.serp-scene{background:#FFFFFF;border-radius:var(--rayon);padding:0;overflow:hidden;position:relative}
.serp-resultat{--serp-k:1;width:var(--serp-largeur,600px);box-sizing:content-box;padding:18px 16px;transform:scale(var(--serp-k));transform-origin:0 0;font-family:Arial,"Liberation Sans",Arimo,Helvetica,sans-serif;color:#202124;margin:0}
.serp-source{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.serp-favicon{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#E8F0FE;color:#174EA6;display:flex;align-items:center;justify-content:center;font:700 14px Arial,"Liberation Sans",sans-serif}
.serp-source-texte{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.serp-site{font-size:14px;color:#202124}
.serp-fil{font-size:var(--serp-fil-px,14px);color:#4D5156;white-space:nowrap;overflow:hidden}
.serp-titre-lien{margin:0 0 4px;font-size:var(--serp-titre-px,20px);line-height:1.3;color:#1A0DAB;font-weight:400}
.serp-extrait{margin:0;font-size:var(--serp-extrait-px,14px);line-height:22px;color:#4D5156}
.serp-ligne{display:block;white-space:pre;overflow:hidden}
.serp-exemple{}  /* exemple affiché tel quel : un style différent (italique) fausserait la largeur mesurée */
.serp-avertissement{margin:0;font-size:.9rem;color:#B4C0BE}
.serp-police{margin:0;font:400 .78rem/1.5 var(--mono);color:#A9B6B4}
.serp-diag-titre{margin-top:.5rem}
.serp-diag{margin:0;display:grid;gap:2px;background:var(--filet-nuit)}
.serp-diag div{background:var(--nuit);padding:.6rem .8rem;display:grid;gap:.15rem}
@media (min-width:40rem){.serp-diag div{grid-template-columns:12rem minmax(0,1fr);align-items:baseline}}
.serp-diag dt{font:400 .78rem var(--mono);color:#A9B6B4}
.serp-diag dd{margin:0;font-weight:500}
.serp-vh,.serp-hors-champ{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sections éditoriales */
.serp-section{padding-bottom:clamp(2.5rem,5vw,4rem)}
.serp-h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:.6rem 0 1.4rem}
.serp-texte{max-width:72rem}
.serp-liste{margin:0 0 1.5rem;padding-left:1.2rem;display:grid;gap:.7rem;color:#D3DBD9;max-width:52rem}
.serp-liste a,.serp-sources a{color:var(--menthe);text-decoration:underline;text-underline-offset:.15em}
.page-serp code{font-family:var(--mono);font-size:.9em;color:var(--menthe)}
.serp-table{border-collapse:collapse;width:100%;max-width:52rem;background:transparent;font-size:.92rem}
.serp-table caption{text-align:left;color:#B4C0BE;padding-bottom:.6rem;font-size:.85rem}
.serp-table th,.serp-table td{background:transparent;border-bottom:1px solid var(--filet-nuit);padding:.55rem .6rem;text-align:left;color:#D3DBD9}
.serp-table thead th{font:500 .75rem var(--mono);color:#A9B6B4;text-transform:uppercase}
.serp-table tbody th{color:var(--texte-nuit);font-weight:600}
.serp-note{color:#B4C0BE;font-size:.9rem;max-width:52rem}
.serp-faq{display:grid;gap:2px;background:var(--filet-nuit);max-width:52rem}
.serp-faq details{background:var(--nuit);padding:.9rem 1rem}
.serp-faq summary{cursor:pointer;font-weight:600;color:var(--texte-nuit)}
.serp-faq p{margin:.7rem 0 0;color:#D3DBD9}
.serp-sources{margin-top:1rem;font-size:.85rem;color:#B4C0BE;max-width:52rem}