/* ============================================================================
   ESTIMATION OBJET, SITE VITRINE (charte commune DEVOLIM)
   ----------------------------------------------------------------------------
   Sections 1 à 8 : le squelette commun à tous les sites Devolim.
   Section 9 : les composants propres à Estimation Objet (maquettes d'écran,
   scènes de Filou, bandeau de confiance).

   Le site ne décrit aucune offre commerciale : ni formule, ni tarif, ni
   nombre d'estimations offertes. Tout cela évolue et vit dans l'application
   et sur la fiche de la boutique, qui font foi. Les styles correspondants
   ont été retirés pour que la tentation ne revienne pas.

   Palette reprise de `lib/app/theme.dart` : fond blanc, vert forêt pour ce
   qui se décide, jaune orangé partout ailleurs. Filou se pose sur le blanc,
   sans pastille ni dégradé.
   ========================================================================= */


/* ============================================================================
   1. IDENTITÉ
   ========================================================================= */

/* --- 1.a  Polices, auto-hébergées ------------------------------------------
   Outfit, la police de l'application, convertie depuis
   `assets/fonts/` (licence OFL dans fonts/LICENSE.txt). Aucun appel à
   fonts.googleapis.com : cela transmettrait l'IP du visiteur à Google.
   Graisses choisies comme dans l'app : 700 pour les titres, 600 pour le
   texte courant. Rien en graisse normale.                                   */

@font-face {
  font-family: "Outfit Display";
  src: url("/fonts/display.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit Body";
  src: url("/fonts/body.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Outfit Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Outfit Body", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- 1.b  Couleurs, thème clair --------------------------------------- */
  --ground:      #FFFFFF;   /* fond de page, comme dans l'app  */
  --surface:     #FFFBF3;   /* cartes, blocs                   */
  --surface-2:   #FFF1D6;   /* fonds secondaires, voile orangé */
  --ink:         #12211A;   /* texte principal                 */
  --ink-soft:    #5A645F;   /* texte secondaire, 70 % d'encre  */
  --ink-faint:   #6C7571;   /* légendes, mentions, 62 %        */
  --line:        #EAE3D6;   /* bordures                        */

  --accent:      #1E5A3C;   /* vert forêt : ici on décide      */
  --accent-deep: #16452D;
  --accent-wash: #E8F1EC;
  --on-accent:   #FFFFFF;

  --gold:        #F5A623;   /* jaune orangé : la chaleur       */
  --gold-deep:   #D9880C;
  --gold-wash:   #FFF1D6;
  --on-gold:     #2A1A05;

  /* --- 1.c  Rythme ------------------------------------------------------- */
  --radius:      22px;      /* les cartes de l'app             */
  --radius-sm:   16px;
  --page:        1120px;
  --reading:     68ch;
  --gap:         clamp(1rem, 3vw, 2rem);
  --section:     clamp(3rem, 7vw, 5rem);
}

/* --- 1.d  Couleurs, thème sombre ----------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #0E1713;
    --surface:     #14201A;
    --surface-2:   #1C2B22;
    --ink:         #ECF2EE;
    --ink-soft:    #A8B4AD;
    --ink-faint:   #808D86;
    --line:        #25362C;

    --accent:      #74C296;
    --accent-deep: #9BD9B4;
    --accent-wash: #16291F;
    --on-accent:   #08130D;

    --gold:        #F7B84B;
    --gold-deep:   #FFCE7A;
    --gold-wash:   #2A2112;
    --on-gold:     #1A1205;
  }
}


/* ============================================================================
   2. BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-accent);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

.container { max-width: var(--page); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.section   { padding-block: var(--section); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; }
strong { font-family: var(--font-display); font-weight: 700; }

.lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--ink-soft); line-height: 1.6; }
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .75rem;
  font-family: var(--font-display);
}

/* Apparition au défilement. Le masquage n'est posé que si le script de
   l'en-tête a marqué la page (`html.anim`) : sans JavaScript, ou avec les
   animations réduites, tout reste visible. */
html.anim .reveal { opacity: 0; transform: translateY(18px); }
html.anim .reveal.seen {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1);
}
html.anim .reveal.d1.seen { transition-delay: .08s; }
html.anim .reveal.d2.seen { transition-delay: .16s; }
html.anim .reveal.d3.seen { transition-delay: .24s; }
html.anim .reveal.d4.seen { transition-delay: .32s; }
html.anim .reveal.d5.seen { transition-delay: .40s; }


/* ============================================================================
   3. EN-TÊTE
   ========================================================================= */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); text-decoration: none; margin-right: auto;
  letter-spacing: -.02em;
}
.brand img {
  width: 34px; height: 34px; border-radius: 10px;
  transition: transform .3s cubic-bezier(.28,1.4,.5,1);
}
.brand:hover img { transform: rotate(-6deg) scale(1.06); }

.lang { display: flex; gap: .1rem; align-items: center; font-size: .78rem; }
.lang a {
  color: var(--ink-faint); text-decoration: none;
  padding: .25rem .5rem; border-radius: 8px; font-weight: 700;
}
.lang a:hover { color: var(--ink); background: var(--surface-2); }
.lang a[aria-current="true"] { color: var(--ink); background: var(--surface-2); }
.lang span { color: var(--line); }


/* ============================================================================
   4. BOUTONS
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .2s cubic-bezier(.28,1.4,.5,1), background-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:hover { background: var(--accent-deep); color: var(--on-accent); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-deep); color: var(--on-gold); }
.btn[aria-disabled="true"] { opacity: .82; pointer-events: none; cursor: default; }
.btn-sm { padding: .5rem 1.1rem; font-size: .84rem; }


/* ============================================================================
   5. ACCUEIL
   ========================================================================= */

.hero { padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--section); position: relative; overflow: hidden; }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.hero p.lead { max-width: 48ch; }
.hero-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.hero-note { font-size: .84rem; color: var(--ink-faint); margin-top: 1rem; }

.features-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
}
@media (min-width: 640px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.feature { background: var(--ground); padding: 1.6rem 1.6rem; transition: background-color .25s ease; }
.feature:hover { background: var(--surface); }
.feature h3 { margin-bottom: .4rem; }
.feature p  { color: var(--ink-soft); font-size: .93rem; margin: 0; }
.feature .ico {
  width: 40px; height: 40px; border-radius: 13px; margin-bottom: .9rem;
  display: grid; place-items: center;
  background: var(--gold-wash); color: var(--gold-deep);
}
.feature .ico svg { width: 21px; height: 21px; }

/* ============================================================================
   6. PAGES DE TEXTE (légal, support)
   ========================================================================= */

.legal { padding-block: clamp(2.5rem, 6vw, 4rem) var(--section); }
.legal .container { max-width: calc(var(--reading) + 6rem); }
.legal h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); margin-bottom: .4rem; }
.legal h2 {
  font-size: 1.2rem; margin: 2.6rem 0 .7rem;
  padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1rem; margin: 1.7rem 0 .4rem; color: var(--ink); }
.legal p, .legal li { color: var(--ink-soft); }
.legal strong { color: var(--ink); }
.legal ul, .legal ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .5rem; }
.legal li::marker { color: var(--gold); }

.updated {
  font-size: .82rem; color: var(--ink-faint);
  margin: 0 0 2rem; font-variant-numeric: tabular-nums;
}
.back { display: inline-block; font-size: .86rem; margin-bottom: 1.5rem; text-decoration: none; }
.back:hover { text-decoration: underline; }

.summary {
  background: var(--gold-wash); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin: 0 0 2rem;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.summary p { color: var(--ink); margin-bottom: .6rem; }
.summary p:last-child { margin-bottom: 0; }

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.5rem; margin: 0 0 2.5rem;
}
.toc p { font-size: .72rem; font-weight: 700; letter-spacing: .12em;
         text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .6rem;
         font-family: var(--font-display); }
.toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.1rem; font-size: .89rem; }
@media (max-width: 620px) { .toc ol { columns: 1; } }
.toc li { break-inside: avoid; margin-bottom: .3rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line);
              border-radius: var(--radius-sm); margin: 1.25rem 0 1.75rem; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 480px; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); font-family: var(--font-display); font-weight: 700; color: var(--ink); }
td { color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }

.warning {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.15rem 1.4rem; margin: 1.5rem 0;
}
.warning p:last-child { margin-bottom: 0; }
.warning.grave { border-left-color: #B8501E; }

.faq details {
  border-bottom: 1px solid var(--line); padding: .95rem 0;
}
.faq summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-deep); font-weight: 700; transition: transform .2s ease; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: .8rem 0 0; color: var(--ink-soft); }


/* ============================================================================
   7. PIED DE PAGE
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 2.75rem 2rem;
  font-size: .87rem;
}
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  justify-content: space-between; margin-bottom: 1.75rem;
}
.footer-col p {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .6rem;
  font-family: var(--font-display);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .4rem; }
.footer-col a { color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--gold-deep); }
.footer-legal {
  border-top: 1px solid var(--line); padding-top: 1.25rem;
  color: var(--ink-faint); font-size: .8rem;
}
.footer-legal p { margin: 0 0 .3rem; }


/* ============================================================================
   8. PAGE 404
   ========================================================================= */

.notfound { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.notfound img { margin: 0 auto 1.5rem; width: 180px; }
.notfound .code {
  font-family: var(--font-display); font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .5rem;
}


/* ============================================================================
   9. ESTIMATION OBJET : SCÈNES, MAQUETTES, FORMULES
   ========================================================================= */

/* --- 9.a  La scène de l'accueil : Filou et trois cartes qui flottent ----- */
.stage { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 380px; }
.stage-glow {
  position: absolute; inset: auto 0 6% 0; margin: 0 auto;
  width: min(420px, 90%); aspect-ratio: 1;
  background: radial-gradient(circle, var(--gold-wash) 0%, transparent 68%);
  border-radius: 50%; z-index: 0;
}
.stage img.fox { position: relative; z-index: 1; width: min(320px, 74%); animation: bob 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.chip-float {
  position: absolute; z-index: 2;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 16px; padding: .6rem .85rem;
  box-shadow: 0 14px 30px -20px rgba(18, 33, 26, .55);
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; line-height: 1.25; white-space: nowrap;
  animation: float 7s ease-in-out infinite;
}
.chip-float small { display: block; color: var(--ink-faint); font-size: .7rem; }
.chip-float .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.chip-float .dot.green { background: var(--accent); }
/* Les pastilles flottantes empruntent la typographie des maquettes mais
   suivent le thème de la page, elles ne sont pas dans un écran de téléphone. */
.chip-float .ui-strong { color: var(--ink); }
.chip-a { top: 4%; left: 0; animation-delay: -1s; }
.chip-b { top: 38%; right: 0; animation-delay: -3.5s; }
.chip-c { bottom: 8%; left: 2%; animation-delay: -5.5s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 520px) {
  .chip-float { font-size: .74rem; padding: .45rem .65rem; }
  .chip-b { right: -.5rem; }
}

/* --- 9.b  Les étapes ----------------------------------------------------- */
.steps { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.25rem; counter-reset: pas; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.4rem; position: relative;
}
.step::before {
  counter-increment: pas; content: counter(pas);
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: .95rem; margin-bottom: .9rem;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* --- 9.c  Les maquettes d'écran, reconstituées en HTML ------------------- */
.screens-row {
  display: grid; gap: clamp(1.25rem, 4vw, 2.25rem); margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.screen figcaption {
  font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; text-align: center;
}

.phone {
  width: 100%; max-width: 280px; margin: 0 auto;
  border-radius: 34px; padding: 9px;
  background: var(--ink);
  box-shadow: 0 26px 50px -30px rgba(18, 33, 26, .7);
  transition: transform .4s cubic-bezier(.22,.8,.3,1);
}
.screen:hover .phone { transform: translateY(-6px); }
.phone-screen {
  background: #FFFFFF; color: #12211A;
  border-radius: 26px; overflow: hidden;
  aspect-ratio: 9 / 18.5;
  display: flex; flex-direction: column;
  padding: .85rem .8rem 1rem;
  font-size: 11px; line-height: 1.35;
}
.phone-bar {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; color: #6C7571; margin-bottom: .55rem; padding: 0 .2rem;
}
.ui-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #12211A; letter-spacing: -.02em; }
.ui-sub { color: #5A645F; font-size: 10px; margin-top: 2px; }
.ui-card {
  background: #FFFBF3; border: 1px solid #EAE3D6; border-radius: 14px;
  padding: .55rem .6rem; margin-top: .5rem;
}
.ui-card.gold { background: #FFF1D6; border-color: #F3DCAE; }
.ui-card.green { background: #E8F1EC; border-color: #C9DED3; }
.ui-row { display: flex; align-items: center; gap: .45rem; }
.ui-row + .ui-row { margin-top: .4rem; }
.ui-thumb { width: 30px; height: 30px; border-radius: 9px; background: #FFF1D6; flex: none; display: grid; place-items: center; }
.ui-thumb svg { width: 15px; height: 15px; color: #D9880C; }
.ui-label { font-size: 10px; color: #5A645F; }
.ui-strong { font-family: var(--font-display); font-weight: 700; color: #12211A; }
.ui-price { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #12211A; letter-spacing: -.03em; }
.ui-pill {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  background: #FFF1D6; color: #8A5A08; border-radius: 999px;
  padding: .12rem .5rem; font-size: 9px;
}
.ui-pill.green { background: #E8F1EC; color: #1E5A3C; }
.ui-btn {
  margin-top: auto; background: #1E5A3C; color: #fff; border-radius: 999px;
  text-align: center; padding: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.ui-btn.gold { background: #F5A623; color: #2A1A05; }
.ui-gauge { height: 5px; border-radius: 99px; background: #EAE3D6; overflow: hidden; margin-top: .35rem; }
.ui-gauge span { display: block; height: 100%; background: #F5A623; border-radius: 99px; }
.ui-gauge.green span { background: #1E5A3C; }
.ui-fox { width: 62px; margin: .1rem auto .35rem; }
.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-top: .5rem; }
.ui-tile { background: #FFFBF3; border: 1px solid #EAE3D6; border-radius: 12px; padding: .45rem .5rem; }
.ui-tile small { display: block; color: #6C7571; font-size: 9px; }
.ui-nav { display: flex; justify-content: space-between; margin-top: .55rem; padding-top: .45rem; border-top: 1px solid #EAE3D6; color: #6C7571; font-size: 9px; }
.ui-nav b { color: #1E5A3C; }
.ui-scan { position: relative; border-radius: 14px; overflow: hidden; background: #12211A; height: 96px; margin-top: .4rem; display: grid; place-items: center; }
.ui-scan .line { position: absolute; left: 0; right: 0; height: 2px; background: #F5A623; animation: scan 2.6s ease-in-out infinite; }
@keyframes scan { 0%, 100% { top: 12%; } 50% { top: 84%; } }
.ui-scan .corner { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.7); }
.ui-scan .c1 { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.ui-scan .c2 { top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.ui-scan .c3 { bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.ui-scan .c4 { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

/* Le thème sombre ne teinte pas les maquettes : l'application est blanche. */

/* --- 9.d  Bandeau de confiance ------------------------------------------ */
.trust {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .trust { grid-template-columns: .85fr 1.15fr; } }
.trust-list { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .trust-list { grid-template-columns: 1fr 1fr; } }
.trust-list li { display: flex; gap: .7rem; align-items: flex-start; }
.trust-list .ico {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--accent-wash); color: var(--accent);
}
.trust-list .ico svg { width: 17px; height: 17px; }
.trust-list b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .95rem; }
.trust-list span { font-size: .87rem; color: var(--ink-soft); }
.trust-fox { display: flex; justify-content: center; }
.trust-fox img { width: min(200px, 60%); animation: bob 7s ease-in-out infinite; }

/* --- 9.e  Bloc d'appel et note ------------------------------------------ */
.callout {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--gold-wash); padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid; gap: 1.25rem; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 780px) { .callout { grid-template-columns: auto 1fr; } }
.callout img { width: 120px; justify-self: center; }
.callout h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: .5rem; }
.callout p { color: var(--ink-soft); margin: 0; }
.callout p + p { margin-top: .6rem; }
.fine { font-size: .84rem; color: var(--ink-faint); }