/* ObraTodo — identité du designer (docs/obratodo/design/tokens, 13/10/2026).
   Mobile d'abord ; 1200 px de conteneur ; orange réservé aux appels à l'action. */
:root{
  --ot-orange:#D35B3B;--ot-orange-f:#B9492C;--ot-orange-ff:#953A22;--ot-orange-50:#FDF1EC;--ot-orange-100:#FADFD4;
  --ot-marine:#1B2C3D;--ot-marine-f:#142230;--ot-marine-600:#2C3E52;--ot-marine-400:#5B6E85;--ot-marine-300:#8393A6;--ot-marine-200:#AEB9C6;
  --ot-sable:#F8F6F2;--ot-sable-100:#F4F0EA;--ot-bord:#E9E3DA;--ot-bord-f:#D9D1C5;
  --ot-vert:#2E8B57;--ot-vert-50:#DDF3E6;--ot-ambre:#D9900F;--ot-ambre-50:#FBEFD3;--ot-rouge:#C8372D;--ot-rouge-50:#F9E0DD;
  --ot-r-carte:24px;--ot-r-champ:12px;--ot-ombre:0 8px 24px -8px rgba(27,44,61,.18);
  --fond:#fff;--texte:#1B2C3D;--accent:#D35B3B;--sur-accent:#fff;
}
body.ot{margin:0;background:#fff;color:var(--ot-marine);font:500 16px/1.5 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:64px}
@media(min-width:900px){body.ot{padding-bottom:0}}
.ot *{box-sizing:border-box}
.ot [hidden]{display:none!important}
.ot a{color:var(--ot-orange-f);text-decoration:none}
.ot a:hover{color:var(--ot-orange-ff)}
.ot h1,.ot h2,.ot h3{font-family:Figtree,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ot-marine);text-wrap:balance}
.ot img{max-width:100%;height:auto}
.ot .saut{position:absolute;left:-999px}.ot .saut:focus{left:12px;top:12px;z-index:200;background:#fff;padding:8px 12px;border-radius:8px}
.ot :focus-visible{outline:3px solid var(--ot-orange);outline-offset:2px}

/* En-tête */
.ot-entete{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;gap:28px;padding:0 16px;background:#fff;border-bottom:1px solid var(--ot-bord)}
@media(min-width:900px){.ot-entete{height:72px;padding:0 48px;gap:36px}}
.ot-marque{display:flex;align-items:center;gap:10px;color:var(--ot-marine)!important}
.ot-picto{width:34px;height:34px;flex:none}
.ot-mot{font:800 24px/1 Figtree;letter-spacing:-.02em;color:var(--ot-marine)}.ot-mot b{font-weight:800;color:var(--ot-orange)}
.ot-nav{display:none;gap:28px;flex:1;font:600 15px/1 Figtree}
.ot-nav a{color:var(--ot-marine)}.ot-nav a:hover{color:var(--ot-orange-f)}.ot-nav .ot-nav-doux{color:var(--ot-marine-400)}
@media(min-width:1100px){.ot-nav{display:flex}}
.ot-entete-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.ot-burger{width:44px;height:44px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px;cursor:pointer}
.ot-burger span{display:block;height:2px;background:var(--ot-marine);border-radius:2px}
@media(min-width:1100px){.ot-burger{display:none}}
.ot-menu{position:sticky;top:64px;z-index:49;background:#fff;border-bottom:1px solid var(--ot-bord);display:flex;flex-direction:column;padding:8px 16px 16px}
.ot-menu[hidden]{display:none}
.ot-menu a{padding:14px 4px;font:700 17px/1 Figtree;color:var(--ot-marine);border-bottom:1px solid var(--ot-sable-100)}
.ot-cache-mobile{display:none!important}@media(min-width:900px){.ot-cache-mobile{display:inline-flex!important}}

/* Boutons */
.ot-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;font:700 15px/1 Figtree;white-space:nowrap;cursor:pointer;transition:transform .2s ease-out,background .2s ease-out;border:0}
.ot-btn:active{transform:scale(.97)}
.ot-btn-grand{height:56px;padding:0 26px;font-size:17px}
.ot-btn-plein{background:var(--ot-orange);color:#fff!important}.ot-btn-plein:hover{background:var(--ot-orange-f);color:#fff!important;box-shadow:0 8px 20px -6px rgba(211,91,59,.55)}
.ot-btn-contour{border:1.5px solid var(--ot-bord-f);background:#fff;color:var(--ot-marine)!important}.ot-btn-contour:hover{border-color:var(--ot-marine)}
.ot-btn-blanc{background:#fff;color:var(--ot-marine)!important}
.ot-entete .ot-btn-plein{height:40px;padding:0 16px;font-size:14px}@media(min-width:900px){.ot-entete .ot-btn-plein{height:44px;padding:0 22px;font-size:15px}}

/* Briques */
.ot-sur{margin:0 0 12px;font:800 12px/1 Figtree;letter-spacing:.1em;text-transform:uppercase;color:var(--ot-orange)}
.ot-chapo{margin:0 0 24px;font:500 18px/1.5 Figtree;color:var(--ot-marine-400)}
.ot-note{margin:14px 0 0;font:500 12px/1.4 Figtree;color:var(--ot-marine-300)}
.ot-carte{background:#fff;border:1px solid var(--ot-bord);border-radius:var(--ot-r-carte);padding:24px}
.ot-tuile{flex:none;width:44px;height:44px;border-radius:12px;background:var(--ot-orange-50);color:var(--ot-orange-f);display:inline-flex;align-items:center;justify-content:center;font:800 18px/1 Figtree}
.ot-puces{display:flex;flex-wrap:wrap;gap:8px}
.ot-puce{height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--ot-bord-f);background:#fff;display:inline-flex;align-items:center;font:600 13px/1 Figtree;color:var(--ot-marine)!important;cursor:pointer}
.ot-puce:hover{border-color:var(--ot-marine)}.ot-puce-on{background:var(--ot-marine);border-color:var(--ot-marine);color:#fff!important}
.ot-etiquette{margin:0 0 8px;font:700 12px/1 Figtree;color:var(--ot-orange-f);text-transform:none}
.ot-vide{padding:32px;border:1.5px dashed var(--ot-bord-f);border-radius:var(--ot-r-carte);color:var(--ot-marine-400);text-align:center}
.ot-petit-t{margin:0 0 16px;font:700 13px/1 Figtree;color:var(--ot-marine-400)}

/* Sections */
.ot-section{max-width:1296px;margin:0 auto;padding:56px 16px}
@media(min-width:900px){.ot-section{padding:80px 48px}}
.ot-section h2{margin:0;font:800 32px/1.1 Figtree}@media(min-width:900px){.ot-section h2{font-size:40px}}
.ot-section-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.ot-deux{display:grid;gap:40px}@media(min-width:900px){.ot-deux{grid-template-columns:1fr 1fr;gap:64px;align-items:center}}

/* Héros */
.ot-hero{background:var(--ot-sable);padding:40px 16px 48px;display:grid;gap:32px}
@media(min-width:900px){.ot-hero{padding:72px max(48px,calc((100% - 1200px)/2)) 64px;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}}
.ot-hero h1{margin:0 0 20px;font:800 40px/1.04 Figtree;letter-spacing:-.025em}
@media(min-width:900px){.ot-hero h1{font-size:64px;line-height:1.02}}
.ot-hero h1 span{color:var(--ot-orange)}
.ot-actions{display:flex;flex-wrap:wrap;gap:12px}
.ot-assistant{border:0;box-shadow:var(--ot-ombre);padding:24px}
.ot-assistant-tete{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.ot-assistant-t{margin:0;font:700 17px/1.2 Figtree}.ot-assistant-s{margin:2px 0 0;font:500 13px/1.3 Figtree;color:var(--ot-marine-400)}
.ot-assistant-champ{width:100%;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 8px 8px 18px;border:1.5px solid var(--ot-bord-f);border-radius:999px;background:#fff;font:500 15px/1.3 Figtree;color:var(--ot-marine-300);text-align:left;cursor:text;margin-bottom:14px}
.ot-assistant-champ span{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ot-marine);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}

/* Outils */
.ot-outils{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.ot-outils{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ot-outils{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}}
.ot-outil{display:flex;flex-direction:column;gap:12px;min-height:150px;padding:20px;border:1px solid var(--ot-bord);border-radius:20px;background:#fff;color:var(--ot-marine)!important;transition:transform .2s ease-out,box-shadow .2s ease-out}
.ot-outil:hover{transform:translateY(-2px);box-shadow:var(--ot-ombre)}
.ot-outil-t{font:700 17px/1.2 Figtree}.ot-outil-d{font:500 13px/1.4 Figtree;color:var(--ot-marine-400)}
.ot-tuile[class*="ot-ico-"]::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ot-ico-euro{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 6a7 7 0 1 0 0 12M4 10h9M4 14h9'/%3E%3C/svg%3E")}
.ot-ico-soleil{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.ot-ico-thermo{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 4v10.5a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E")}
.ot-ico-toit{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7M5 10v10h14V10'/%3E%3C/svg%3E")}
.ot-ico-jauge{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 18a8 8 0 1 1 16 0M12 18l4-6'/%3E%3C/svg%3E")}
.ot-ico-rouleau{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='14' height='6' rx='2'/%3E%3Cpath d='M17 6h3v5h-8v3M12 14v7'/%3E%3C/svg%3E")}
.ot-ico-loupe{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4'/%3E%3Ccircle cx='16' cy='15' r='3'/%3E%3Cpath d='m21 20-2.5-2.5'/%3E%3C/svg%3E")}
.ot-ico-plan{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 12h9V3M12 12v9'/%3E%3C/svg%3E")}
.ot-ico-cube{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7l9-5Zm0 10 9-5M12 12v10M12 12 3 7'/%3E%3C/svg%3E")}
.ot-ico-regle{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 17 17 3l4 4L7 21l-4-4ZM7 13l2 2M10 10l2 2M13 7l2 2'/%3E%3C/svg%3E")}
.ot-ico-outil{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E")}

/* À la une */
.ot-une{display:grid;gap:28px}@media(min-width:900px){.ot-une{grid-template-columns:1.4fr 1fr;gap:32px}}
.ot-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--ot-r-carte);margin-bottom:18px;background:var(--ot-sable-100)}
.ot-une-grande h3{margin:0 0 10px;font:800 26px/1.15 Figtree}@media(min-width:900px){.ot-une-grande h3{font-size:32px}}
.ot-une-grande h3 a,.ot-ligne h3 a{color:var(--ot-marine)!important}
.ot-ligne{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--ot-bord)}
.ot-ligne img{flex:none;width:120px;height:90px;object-fit:cover;border-radius:14px;background:var(--ot-sable-100)}
.ot-ligne h3{margin:0 0 6px;font:700 17px/1.25 Figtree;letter-spacing:-.01em}
.ot-ligne time{font:500 13px/1 Figtree;color:var(--ot-marine-300)}

/* Bande devis */
.ot-bande{background:var(--ot-sable)}
.ot-bande>.ot-deux{max-width:1296px;margin:0 auto;padding:56px 16px}@media(min-width:900px){.ot-bande>.ot-deux{padding:80px 48px}}
.ot-bande h2{margin:0 0 16px;font:800 32px/1.08 Figtree}@media(min-width:900px){.ot-bande h2{font-size:44px}}
.ot-etapes{list-style:none;counter-reset:e;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px}
.ot-etapes li{counter-increment:e;display:grid;grid-template-columns:32px 1fr;column-gap:14px}
.ot-etapes li::before{content:counter(e);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--ot-orange);color:#fff;display:flex;align-items:center;justify-content:center;font:800 14px/1 Figtree}
.ot-etapes b{font:700 17px/1.2 Figtree}.ot-etapes span{font:500 15px/1.4 Figtree;color:var(--ot-marine-400)}
.ot-metiers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ot-metier{border:1.5px solid var(--ot-bord);border-radius:14px;padding:14px 16px;font:700 15px/1.2 Figtree;color:var(--ot-marine)!important}
.ot-metier:hover{border-color:var(--ot-orange);background:var(--ot-orange-50)}

/* Promesse + calendrier */
.ot-promesses{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.ot-promesses>div{display:flex;gap:16px}.ot-promesses b{font:700 17px/1.2 Figtree}.ot-promesses p{margin:4px 0 0;font:500 15px/1.5 Figtree;color:var(--ot-marine-400)}
.ot-calendrier{background:var(--ot-marine);color:#fff;border-radius:var(--ot-r-carte);padding:28px}
.ot-calendrier-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ot-calendrier h2{margin:0;font:700 20px/1.2 Figtree;color:#fff}.ot-calendrier a{color:#EB937A;font:600 13px/1 Figtree}
.ot-repere{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--ot-marine-600)}
.ot-repere-mois{flex:none;width:76px;text-align:center;background:var(--ot-marine-f);border-radius:10px;padding:10px 4px;font:800 13px/1.2 Figtree;text-transform:uppercase}
.ot-repere b{font:700 16px/1.25 Figtree}.ot-repere p{margin:4px 0 0;font:500 13px/1.4 Figtree;color:var(--ot-marine-200)}

/* Artisans */
.ot-artisans{background:var(--ot-orange);color:#fff;border-radius:32px;padding:36px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
@media(min-width:900px){.ot-artisans{padding:56px 64px}}
.ot-artisans .ot-sur{color:var(--ot-orange-100)}.ot-artisans h2{color:#fff;margin:0 0 10px;font-size:30px}.ot-artisans p{margin:0;color:var(--ot-orange-50)}

/* Pied */
.ot-pied{background:var(--ot-sable);border-top:1px solid var(--ot-bord);padding:48px 16px 28px}
@media(min-width:900px){.ot-pied{padding:56px 48px 32px}}
.ot-pied-grille{max-width:1200px;margin:0 auto 32px;display:grid;gap:28px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.ot-pied-grille{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px}}
.ot-pied-marque{grid-column:1/-1}@media(min-width:900px){.ot-pied-marque{grid-column:auto}}
.ot-pied-marque p{margin:14px 0 0;font:500 14px/1.5 Figtree;color:var(--ot-marine-400);max-width:280px}
.ot-pied h2{margin:0 0 14px;font:700 14px/1 Figtree}
.ot-pied-grille>div>a:not(.ot-marque){display:block;padding:5px 0;font:500 14px/1.3 Figtree;color:var(--ot-marine-400)!important}
.ot-pied-bas{max-width:1200px;margin:0 auto;padding-top:16px;border-top:1px solid var(--ot-bord);font:500 12px/1.5 Figtree;color:var(--ot-marine-300)}
.ot-pied-bas+.ot-pied-bas{border-top:0;padding-top:4px}

/* Barre basse mobile */
.ot-barre{position:fixed;left:0;right:0;bottom:0;z-index:60;height:64px;background:#fff;border-top:1px solid var(--ot-bord);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;text-align:center}
.ot-barre a{font:700 12px/1 Figtree;color:var(--ot-marine-400)!important;padding:10px 0}
.ot-barre .ot-barre-cta{color:#fff!important;background:var(--ot-orange);border-radius:999px;margin:0 6px;padding:12px 0}
@media(min-width:900px){.ot-barre{display:none}}
.ot .bc-zone{bottom:76px}@media(min-width:900px){.ot .bc-zone{bottom:24px}}

/* Pages intérieures (article, outil, pages secondaires) */
.ot-page{max-width:760px;margin:0 auto;padding:32px 16px 64px}
@media(min-width:900px){.ot-page{padding:56px 24px 96px}}
.ot-page-large{max-width:1200px}
.ot-page h1{margin:0 0 16px;font:800 34px/1.08 Figtree}@media(min-width:900px){.ot-page h1{font-size:48px}}
.ot-page h2{font:800 26px/1.2 Figtree;margin:40px 0 12px}
.ot-page h3{font:700 20px/1.3 Figtree;margin:28px 0 8px}
.ot-page p,.ot-page li{font:500 17px/1.65 Figtree;color:#2C3E52}
.ot-fil{font:600 13px/1 Figtree;color:var(--ot-marine-300);margin-bottom:20px}.ot-fil a{color:var(--ot-marine-400)!important}
.ot main#principal input,.ot main#principal select,.ot main#principal textarea{font-family:Figtree,system-ui,sans-serif;border-radius:var(--ot-r-champ);border:1.5px solid var(--ot-bord-f)}
.ot main#principal button[type=submit],.ot main#principal .bouton-principal{background:var(--ot-orange);color:#fff;border-radius:999px;border:0}

/* Article */
.ot-meta{font:500 14px/1.5 Figtree;color:var(--ot-marine-300);margin:0 0 20px}
.ot-art-fig{margin:0 0 28px}.ot-art-fig .ot-photo{aspect-ratio:16/9;margin:0}
.ot-corps a{text-decoration:underline;text-underline-offset:3px}
.ot-corps blockquote{margin:24px 0;padding:18px 22px;background:var(--ot-sable);border-left:4px solid var(--ot-orange);border-radius:0 14px 14px 0}
.ot-corps table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}.ot-corps th,.ot-corps td{border-bottom:1px solid var(--ot-bord);padding:10px 8px;text-align:left}
.ot-encart-devis{margin:40px 0;padding:24px;background:var(--ot-sable);border-radius:var(--ot-r-carte);border:1px solid var(--ot-bord)}
.ot-encart-t{margin:0 0 6px!important;font:800 20px/1.2 Figtree!important;color:var(--ot-marine)!important}
.ot .comm{border-top:1px solid var(--ot-bord)}
.ot .comm-f{display:grid;gap:8px;margin-top:16px}.ot .comm-f label{font:600 14px/1 Figtree}
.ot .comm-f input,.ot .comm-f textarea{padding:12px 14px;font-size:16px}

/* Page d'outil */
.ot .serv-tete{margin-bottom:24px}
.ot .outil-vig{border-radius:var(--ot-r-carte)!important}
.ot .serv-autres{margin-top:56px;padding-top:32px;border-top:1px solid var(--ot-bord)}
.ot .serv-l{list-style:none;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ot .serv-l a{display:block;padding:16px 18px;border:1px solid var(--ot-bord);border-radius:16px;font:700 15px/1.3 Figtree;color:var(--ot-marine)!important}
.ot .serv-l a:hover{border-color:var(--ot-orange);background:var(--ot-orange-50)}
.ot #outil-corps button,.ot .gate button,.ot [class*="gate"] button{border-radius:999px}
.ot details{border:1px solid var(--ot-bord);border-radius:16px;padding:14px 18px;margin:10px 0;background:#fff}
.ot summary{font:700 16px/1.3 Figtree;cursor:pointer}

/* Mobile : la barre basse porte « Devis » ; l'en-tête garde la marque et le menu. */
@media(max-width:599px){.ot-entete .ot-btn-plein{display:none}.ot-hero h1{font-size:36px}.ot-actions .ot-btn{width:100%}}
.ot{overflow-x:clip}