body.guide-organisation-ressources-ipad {
  --max: 1240px;
  --resource-blue: #2563eb;
  --resource-blue-soft: #edf5ff;
  --cloud-green: #0f766e;
  --cloud-green-soft: #eafbf6;
  --drive-yellow: #c27b08;
  --drive-yellow-soft: #fff8df;
}

body.guide-organisation-ressources-ipad .wrap {
  padding-top: 28px;
  padding-bottom: 58px;
}

body.guide-organisation-ressources-ipad .brand img {
  width: min(330px, 100%);
}

body.guide-organisation-ressources-ipad .hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.85)),
    radial-gradient(circle at 88% 18%, rgba(37,99,235,.13), transparent 28%),
    radial-gradient(circle at 76% 90%, rgba(15,118,110,.12), transparent 30%);
}

body.guide-organisation-ressources-ipad .hero::before {
  content: "";
  position: absolute;
  inset: -165px auto auto -125px;
  width: 350px;
  height: 350px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(245,130,32,.11), transparent 69%);
  pointer-events: none;
}

body.guide-organisation-ressources-ipad .hero-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
  align-items: center;
}

body.guide-organisation-ressources-ipad h1 {
  max-width: 14ch;
}

.resource-hero-card {
  min-height: 390px;
  padding: 25px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 27px;
  background:
    radial-gradient(circle at 18% 14%, rgba(245,130,32,.09), transparent 31%),
    radial-gradient(circle at 88% 86%, rgba(15,118,110,.10), transparent 32%),
    linear-gradient(155deg, #fff, #f7f9fd);
  box-shadow: var(--shadow-soft);
}

.resource-hero-card > p {
  max-width: 40ch;
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .94rem;
}

.resource-route {
  width: min(100%, 355px);
  display: grid;
  justify-items: center;
  gap: 7px;
}

.route-sources {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.route-sources span,
.route-cloud,
.route-files {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

.route-sources span {
  min-height: 64px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 17px;
  color: #475569;
  font-weight: 750;
}

.route-sources .icon { color: var(--drive-yellow); }

.route-cloud,
.route-files {
  width: 88%;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border-radius: 18px;
}

.route-cloud { border-color: #c9eadf; }
.route-files { border-color: #cfe0fb; }
.route-cloud > .icon { color: var(--cloud-green); }
.route-files > .icon { color: var(--resource-blue); }
.route-cloud strong,
.route-cloud small,
.route-files strong,
.route-files small { display: block; }
.route-cloud small,
.route-files small { color: var(--muted); margin-top: 1px; }
.route-arrow { color: #94a3b8; font-size: 1.2rem; line-height: 1; }

body.guide-organisation-ressources-ipad .quick-start { margin-top: 24px; }
body.guide-organisation-ressources-ipad .todo { grid-template-columns: 30px minmax(0, 1fr) auto; }

.migration-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #d8e4f8;
  border-radius: 18px;
  background: linear-gradient(135deg, #f2f7ff, #fff);
}

.migration-note > .icon {
  width: 25px;
  height: 25px;
  margin: 2px auto 0;
  color: var(--resource-blue);
}

.migration-note p { margin: 0; color: #40526c; font-size: .94rem; }

.app-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.app-role-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: #fff;
}

.app-role-card.files-role { border-color: #cfe0fb; background: linear-gradient(150deg, var(--resource-blue-soft), #fff 58%); }
.app-role-card.cloud-role { border-color: #c9eadf; background: linear-gradient(150deg, var(--cloud-green-soft), #fff 58%); }
.role-label { display: block; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.app-role-card h3 { margin: 2px 0 5px; font-size: 1.2rem; }
.app-role-card p { margin: 0; color: var(--muted); }
.app-role-card ul { margin: 13px 0 0; padding-left: 1.2rem; color: var(--muted); }
.app-role-card li + li { margin-top: 6px; }

.common-principle {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #e7d7b0;
  border-radius: 19px;
  background: var(--drive-yellow-soft);
}

.common-principle > .icon { width: 25px; height: 25px; margin: auto; color: #9a640b; }
.common-principle p { margin: 0; color: #66542d; }
body.guide-organisation-ressources-ipad .panel { scroll-margin-top: 130px; }

.cloud-story {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cloud-story article {
  position: relative;
  min-height: 205px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
}

.cloud-story article > .icon { width: 31px; height: 31px; margin-top: 25px; color: var(--resource-blue); }
.cloud-story h3 { margin: 12px 0 5px; font-size: 1.08rem; }
.cloud-story p { margin: 0; color: var(--muted); }
.story-number { position: absolute; top: 16px; right: 17px; color: #cbd5e1; font-size: 1.4rem; font-weight: 850; }

.truth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.guide-organisation-ressources-ipad .callout.warning { border-color: #f0d8a1; background: #fffaf0; }
body.guide-organisation-ressources-ipad .callout.warning h3 { color: #8a5a0b; }

.vocabulary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.vocabulary article { padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fbfcfe; }
.vocabulary h3 { margin: 0 0 5px; font-size: .98rem; }
.vocabulary p { margin: 0; color: var(--muted); font-size: .9rem; }

.steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; align-items: start; }

.storage-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
}

.storage-table:focus-visible { outline: 3px solid rgba(245,130,32,.24); outline-offset: 3px; }
.storage-table table { width: 100%; min-width: 850px; border-collapse: collapse; }
.storage-table th,
.storage-table td { padding: 14px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.storage-table th { color: #475569; background: #f8fafc; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.storage-table tbody tr:last-child td { border-bottom: 0; }
.storage-table td:first-child { width: 17%; }
.storage-table td:nth-child(2) { width: 25%; font-weight: 650; }
.storage-table td:nth-child(3),
.storage-table td:nth-child(4) { color: var(--muted); }

.service-pill {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .79rem;
  font-weight: 800;
  white-space: nowrap;
}

.service-pill.icloud { color: #1d4ed8; background: var(--resource-blue-soft); }
.service-pill.google { color: #8a5a0b; background: var(--drive-yellow-soft); }
.service-pill.microsoft { color: #075985; background: #e8f6ff; }
.service-pill.shared { color: #6d3fb1; background: #f3efff; }
.service-pill.local { color: #475569; background: #eef2f7; }

.storage-callout {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid #cfe0fb;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--resource-blue-soft), #fff);
}

.storage-number {
  min-height: 76px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: var(--resource-blue);
  font-size: 1.5rem;
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
}

.storage-callout h3 { margin: 0 0 4px; }
.storage-callout p { margin: 0; color: var(--muted); }
.collaboration-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 15px; align-items: start; }

.import-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.import-routes article {
  position: relative;
  min-height: 220px;
  padding: 19px 19px 48px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
}

.route-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--resource-blue); background: var(--resource-blue-soft); }
.import-routes h3 { margin: 13px 0 5px; }
.import-routes p { margin: 0; color: var(--muted); }
.route-choice { position: absolute; left: 19px; bottom: 17px; color: var(--cloud-green); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.sync-cycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.sync-cycle article { min-height: 155px; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.sync-cycle article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--resource-blue); background: var(--resource-blue-soft); font-weight: 850; }
.sync-cycle h3 { margin: 12px 0 4px; font-size: 1rem; }
.sync-cycle p { margin: 0; color: var(--muted); font-size: .9rem; }
.cycle-arrow { color: #94a3b8; font-weight: 850; }

.folder-model { padding: 21px; border: 1px solid #cfe0fb; border-radius: 23px; background: linear-gradient(150deg, var(--resource-blue-soft), #fff 58%); }
.folder-root { width: fit-content; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid #bfd5fa; border-radius: 16px; color: #1e4c96; background: #fff; }
.folder-root .icon { color: var(--resource-blue); }
.folder-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 17px; }
.folder-branches article { padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.92); }
.folder-branches span { color: var(--resource-blue); font-size: .78rem; font-weight: 850; }
.folder-branches h3 { margin: 6px 0 4px; font-size: 1rem; }
.folder-branches p { margin: 0; color: var(--muted); font-size: .89rem; }

.organisation-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.organisation-rules article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.rule-number { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--cloud-green); background: var(--cloud-green-soft); font-weight: 850; }
.organisation-rules h3 { margin: 1px 0 4px; font-size: 1rem; }
.organisation-rules p { margin: 0; color: var(--muted); font-size: .91rem; }

.class-kit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.class-kit article { min-height: 176px; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.class-kit .icon { color: var(--resource-blue); }
.class-kit h3 { margin: 13px 0 4px; font-size: .98rem; }
.class-kit p { margin: 0; color: var(--muted); font-size: .88rem; }

.classroom-rule,
.fallback-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 18px;
  align-items: center;
  padding: 21px;
  border: 1px solid #c9eadf;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--cloud-green-soft), #fff);
}

.classroom-rule h3,
.fallback-card h3 { margin: 3px 0 5px; }
.classroom-rule p,
.fallback-card p { margin: 0; color: var(--muted); }
.classroom-rule > .icon,
.fallback-card > .icon { width: 58px; height: 58px; margin: auto; color: var(--cloud-green); opacity: .78; }
.example-label { color: var(--cloud-green); font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

.troubleshooting-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trouble-card { min-height: 205px; padding: 19px; border: 1px solid var(--line); border-radius: 21px; background: #fff; }
.trouble-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #9a640b; background: var(--drive-yellow-soft); }
.trouble-card h3 { margin: 13px 0 6px; font-size: 1.03rem; }
.trouble-card p { margin: 0; color: var(--muted); font-size: .91rem; }
.fallback-card { border-color: #d8e4f8; background: linear-gradient(135deg, #f2f7ff, #fff); }
.fallback-card > .icon { color: var(--resource-blue); }

@media (max-width: 1050px) {
  body.guide-organisation-ressources-ipad .hero-grid { grid-template-columns: 1fr; }
  .resource-hero-card { min-height: auto; }
  .vocabulary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .app-role-grid,
  .truth-grid,
  .steps-grid,
  .collaboration-layout,
  .organisation-rules { grid-template-columns: 1fr; }
  .cloud-story,
  .import-routes,
  .folder-branches,
  .troubleshooting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-cycle { grid-template-columns: 1fr; }
  .sync-cycle article { min-height: auto; }
  .cycle-arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 620px) {
  .resource-hero-card { padding: 18px; }
  .route-sources,
  .cloud-story,
  .vocabulary,
  .import-routes,
  .folder-branches,
  .class-kit,
  .troubleshooting-grid { grid-template-columns: 1fr; }
  .app-role-card { grid-template-columns: 1fr; }
  .storage-callout { grid-template-columns: 1fr; }
  .storage-number { min-height: 62px; }
  .classroom-rule,
  .fallback-card { grid-template-columns: 1fr; }
  .classroom-rule > .icon,
  .fallback-card > .icon { display: none; }
  body.guide-organisation-ressources-ipad .todo { grid-template-columns: 30px minmax(0, 1fr); }
  body.guide-organisation-ressources-ipad .todo .tag { grid-column: 2; justify-self: start; }
}

@media print {
  .resource-hero-card,
  .app-role-card,
  .cloud-story article,
  .storage-callout,
  .import-routes article,
  .folder-model,
  .classroom-rule,
  .fallback-card { box-shadow: none; break-inside: avoid; }
  .cloud-story,
  .import-routes,
  .folder-branches,
  .class-kit,
  .troubleshooting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cycle-arrow { display: none; }
}