/* Pivotis Tools : même langage que la vitrine Pivotis. Graphite et blanc, UN seul bleu, filets fins,
   la typographie avant la couleur. Aucune ressource extérieure (politique de contenu des pages). */
:root{
  --graphite:#0e1621;--graphite-2:#152030;--graphite-3:#1d2a3d;--nav-texte:#c3ccd8;--nav-gris:#8793a5;
  --fond:#f5f6f8;--papier:#fff;--encre:#17202a;--encre-2:#334155;--gris:#64748b;--gris-2:#94a3b8;
  --ligne:#d9dee5;--ligne-2:#e9ecf1;--accent:#1f58a8;--accent-fonce:#18467f;--accent-doux:#eaf1fa;--accent-clair:#7fb0f0;
  --rayon:12px;--largeur:68rem;
  --police:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:16.5px/1.65 var(--police)}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-fonce)}
:focus-visible{outline:2px solid var(--accent-clair);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-weight:650;letter-spacing:-.02em;line-height:1.15;color:inherit;text-wrap:balance}
p,li{max-width:72ch}
.saut{position:absolute;left:-999px}
.saut:focus{left:1rem;top:1rem;z-index:10;background:#fff;color:var(--encre);padding:.5rem .8rem;border-radius:6px}

/* ------------------------------------------------ largeur commune (fonds pleine largeur sans débordement) */
body{min-height:100vh;display:flex;flex-direction:column}
header,main,footer{width:100%;max-width:var(--largeur);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right))}
main{flex:1 0 auto}

/* ------------------------------------------------ barre du haut, graphite d'un bord à l'autre */
header{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;padding-block:18px;
  background:var(--graphite);box-shadow:0 0 0 100vmax var(--graphite);clip-path:inset(0 -100vmax);color:#fff}
.marque{display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;row-gap:1px;color:#fff;text-decoration:none;
  font-size:1.2rem;font-weight:700;letter-spacing:.01em;line-height:1.2}
.marque::before{content:"";grid-row:1/3;width:34px;height:34px;background:url("logo.svg") center/contain no-repeat}
.marque small{display:block;font-size:.76rem;font-weight:500;color:var(--nav-gris);letter-spacing:.02em}
.marque:hover{color:#fff}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
nav a{display:block;color:var(--nav-texte);text-decoration:none;font-size:.93rem;font-weight:500;padding:8px 12px;border-radius:6px}
nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
nav a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--accent-clair);border-radius:6px 6px 0 0}
.langues{margin:0 0 0 auto;font-size:.85rem;color:var(--nav-gris);max-width:none}
.langues a{color:var(--nav-texte);text-decoration:none}
.langues a:hover{color:#fff;text-decoration:underline}
.langues span{color:#fff;font-weight:600}

/* ------------------------------------------------ le titre de la page : la bande graphite continue sous la barre */
main{padding-bottom:4rem}
main>h1:first-child{margin:-1px 0 0;padding:3.2rem 0 1.4rem;font-size:clamp(2rem,4.6vw,3.3rem);color:#fff;
  background:var(--graphite);box-shadow:0 0 0 100vmax var(--graphite);clip-path:inset(0 -100vmax)}
main>h1:first-child::before{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--accent-clair);margin-bottom:1.3rem}
main>h1:first-child+.chapeau{margin:-1px 0 0;padding:1px 0 3.2rem;font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;color:var(--nav-texte);
  max-width:none;background:var(--graphite);box-shadow:0 0 0 100vmax var(--graphite);clip-path:inset(0 -100vmax)}
main>h1:first-child:not(:has(+.chapeau)){padding-bottom:3rem}
main>h1:first-child+.chapeau,main>h1:first-child:not(:has(+.chapeau)){margin-bottom:2.8rem}
.chapeau{font-size:1.12rem;color:var(--encre-2)}

/* ------------------------------------------------ titres et texte courant */
main h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:2.6rem 0 .9rem}
main p{margin:0 0 1rem}
main ul,main ol{padding-left:1.2rem}
main li{margin:.3rem 0}
.meta,.aide{color:var(--gris);font-size:.88rem;margin:.3rem 0}

/* ------------------------------------------------ cartes */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:20px;margin:0 0 2.5rem}
.carte,.produit{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:2rem 2rem 1.8rem}
.cartes .carte{display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s}
.cartes .carte:hover{border-color:#b9c5d4;box-shadow:0 18px 40px -24px rgba(16,24,40,.25);transform:translateY(-2px)}
.cartes .carte>p:last-child{margin-top:auto;margin-bottom:0;padding-top:.6rem}
.carte h2,.produit h2{margin-top:0;font-size:1.4rem}
.carte ul{padding-left:0;list-style:none}
.carte ul li{position:relative;padding-left:1.4rem;color:var(--encre-2);font-size:.97rem}
.carte ul li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
main>.carte{margin:2.5rem 0}
.produit{margin:0 0 2rem}
.produit>.meta:first-of-type{display:inline-block;background:var(--accent-doux);color:var(--accent-fonce);font-weight:600;
  font-size:.82rem;padding:6px 12px;border-radius:8px;margin-bottom:1rem}
.produit ul{padding-left:0;list-style:none}
.produit ul li{position:relative;padding-left:1.7rem}
.produit ul li::before{content:"";position:absolute;left:3px;top:.42em;width:6px;height:11px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ------------------------------------------------ boutons */
.bouton{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:1px solid transparent;border-radius:8px;
  padding:13px 22px;font:inherit;font-size:.97rem;font-weight:600;line-height:1.1;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s}
.bouton::after{content:"→";transition:transform .15s}
.bouton:hover{background:#2766bf;color:#fff}
.bouton:hover::after{transform:translateX(3px)}
.bouton.secondaire{background:var(--papier);color:var(--encre);border-color:var(--ligne)}
.bouton.secondaire:hover{border-color:var(--gris-2);color:var(--encre)}
button.bouton::after{content:none}

/* ------------------------------------------------ notre façon de travailler (accueil) */
.points{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1px;
  background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;margin:0}
.points li{background:var(--papier);margin:0;padding:1.6rem 1.6rem 1.5rem;max-width:none;color:var(--encre-2);font-size:.97rem}
.points li strong{display:block;color:var(--encre);font-size:1.05rem;margin-bottom:.35rem}
.points li strong::before{content:"";display:block;width:22px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:.9rem}
.points a{font-weight:600}
body>main>.points:only-of-type li{font-size:1.05rem}

/* ------------------------------------------------ comment ça marche (sur mesure) : 4 étapes numérotées */
.etapes{list-style:none;padding:0!important;margin:0 0 2.6rem;counter-reset:etape;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:16px}
.etapes li{counter-increment:etape;margin:0;max-width:none;background:var(--papier);border:1px solid var(--ligne);border-top:3px solid var(--accent);
  border-radius:0 0 var(--rayon) var(--rayon);padding:1.2rem 1.3rem 1.3rem;font-size:.95rem;color:var(--encre-2)}
.etapes li::before{content:counter(etape,decimal-leading-zero);display:block;font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--accent);margin-bottom:.5rem}
.etapes li strong{color:var(--encre)}

/* ------------------------------------------------ formulaire de demande */
form#devis{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:2rem;max-width:48rem;
  box-shadow:0 24px 60px -36px rgba(16,24,40,.25)}
form#devis>.meta:first-child{margin-top:0}
.champ{margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.4rem}
.champ label{font-weight:600;font-size:.95rem;color:var(--encre)}
.champ.case{flex-direction:row;align-items:flex-start;gap:.7rem;padding:1rem 1.1rem;background:var(--fond);border-radius:8px}
.champ.case label{font-weight:400;font-size:.92rem;color:var(--encre-2)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--encre);background:var(--papier);padding:.7rem .85rem;border:1px solid var(--ligne);
  border-radius:8px;width:100%;max-width:100%;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:7rem}
select{appearance:auto}
input[type=file]{padding:.55rem;background:var(--fond);border-style:dashed}
input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--accent)}
input:hover,select:hover,textarea:hover{border-color:var(--gris-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,88,168,.18)}
form#devis button.bouton{width:100%;justify-content:center;padding:15px 22px;font-size:1.02rem}
.pot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.avert{background:#fff4d6;border:1px solid #e0c060;padding:.6rem .9rem;border-radius:8px}

/* ------------------------------------------------ pied de page graphite */
footer{background:var(--graphite);box-shadow:0 0 0 100vmax var(--graphite);clip-path:inset(0 -100vmax);color:var(--nav-gris);
  padding-block:2.6rem 2.4rem;font-size:.88rem}
footer ul{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
footer a{color:var(--nav-texte);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer p{margin:.3rem 0;max-width:62ch}

/* ------------------------------------------------ page d'accueil sans langue (choix de la langue) */
body>main:first-child{padding-top:0}
body>main:first-child>h1:first-child{padding-top:4rem}
body>main:first-child>h1:first-child::before{width:44px;height:44px;border-radius:0;background:url("logo.svg") left center/contain no-repeat}
body>main:first-child>.points{margin-top:0}
body>main:first-child>.points li{padding:0}
body>main:first-child>.points a{display:block;padding:1.5rem 1.6rem;color:var(--encre);text-decoration:none;font-size:1.05rem}
body>main:first-child>.points a:hover{background:var(--accent-doux);color:var(--accent-fonce)}

/* ------------------------------------------------ téléphone */
@media (max-width:720px){
  body{font-size:16px}
  header{gap:.4rem 1rem;padding-block:14px}
  nav{order:3;width:100%;overflow-x:auto}
  nav ul{flex-wrap:nowrap}
  nav a{padding:8px 10px;white-space:nowrap}
  .langues{margin-left:auto}
  main>h1:first-child{padding-top:2.2rem}
  main>h1:first-child+.chapeau{padding-bottom:2.2rem}
  .carte,.produit,form#devis{padding:1.4rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{header,footer,main>h1:first-child,main>h1:first-child+.chapeau{background:none;box-shadow:none;color:#000;clip-path:none}}